Fix loading indicator getting clipped on macOS

By redoing the indicator in CSS.
EFForg · Aug 24, 2020 · 2a226b2 · 2a226b2
1 parent b761e5d
commit 2a226b2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/skin/options-layout.css b/src/skin/options-layout.css
@@ -123,8 +123,21 @@ p, #settingsForm {
     justify-content: center;
 }
 
-#tracking-domains-loader .ui-icon {
-    font-size: 500%;
+#tracking-domains-loader .spinner {
+    border: 0.5em solid #222;
+    border-bottom-color: #fff;
+    height: 5em;
+    width: 5em;
+    border-radius: 5em;
+    animation: spin 1s infinite linear;
+}
+@keyframes spin {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(359deg);
+    }
 }
 
 #blockedResources {

diff --git a/src/skin/options.html b/src/skin/options.html
@@ -93,7 +93,7 @@ <h1><span class="i18n_options_title"></span></h1>
         <span id="options_domain_list_no_trackers" class="i18n_options_domain_list_no_trackers" style="display:none"></span>
       </p>
       <div id="tracking-domains-loader" style="display:none">
-        <div class="ui-icon ui-icon-loading-status-circle rotate"></div>
+        <div class="spinner"></div>
       </div>
       <div id="tracking-domains-div">
           <ul id="tracking-domains-filters">