Optimize the spinner animation

Use a CSS box-shadow trick to implement it with just a single
DOM element instead of four.

static/css/add_credential.css

@@ -1,5 +1,5 @@
 #waiting .spinner {
-    margin: 0;
+    margin: 0 0 0 10px;
 }
 
 #add-credential-form #error-text, #login-tfa-form #error-text {

static/css/base.css

@@ -192,50 +192,25 @@ pre {
 
 .spinner {
     display: none;
-    width: 24px;
+    width: 4px;
-    height: 8px;
+    height: 4px;
-    margin: 4px  auto 0 auto;
+    border-radius: 50%;
-
+    animation: spinner-pulse 1s infinite linear;
+    margin: 4px auto 0 auto;
 }
 
 .spinner.started {
     display: block;
 }
 
-
-.spinner > div {
-    float: left;
-    width: 4px;
-    height: 4px;
-    margin: 0 2px;
-
-    background: #AAA;
-    border-radius: 2px;
-    animation-duration: 1s;
-    animation-name: spinner-pulse;
-    animation-iteration-count: infinite;
-}
-
-.spinner > div:nth-child(2) {
-    animation-delay: 0.15s;
-}
-
-.spinner > div:nth-child(3) {
-    animation-delay: 0.3s;
-}
-
 @keyframes spinner-pulse {
-    from {
+    0%   {box-shadow: 8px 0 #aaaaaa99, -8px 0 #aaaaaa00; background: #aaaaaa4c }
-        opacity: 0;
+    15%  {box-shadow: 8px 0 #aaaaaa4c, -8px 0 #aaaaaa4c; background: #aaaaaa00 }
-    }
+    30%  {box-shadow: 8px 0 #aaaaaa00, -8px 0 #aaaaaa99; }
-
+    50%  {box-shadow: 8px 0 #aaaaaa66, -8px 0 #aaaaaaff; }
-    50% {
+    65%  {box-shadow: 8px 0 #aaaaaab2, -8px 0 #aaaaaab2; background: #aaaaaaff }
-        opacity: 1;
+    80%  {box-shadow: 8px 0 #aaaaaaff, -8px 0 #aaaaaa66; }
-    }
+    100% {box-shadow: 8px 0 #aaaaaa99, -8px 0 #aaaaaa00; background: #aaaaaa4c }
-
-    to {
-        opacity: 0;
-    }
 }
 
 .nav-tabs > li.active > a,

static/css/my_checks_desktop.css

@@ -13,6 +13,7 @@
 
 #checks-table .indicator-cell {
     text-align: center;
+    margin: 0 auto;
 }
 
 #checks-table th {

templates/accounts/login_webauthn.html

@@ -41,11 +41,7 @@
             Follow your browser's steps to authenticate with your security key.
         </p>
 
-        <div class="spinner started">
+        <div class="spinner started"></div>
-            <div class="d1"></div>
-            <div class="d2"></div>
-            <div class="d3"></div>
-        </div>
     </div>
 
     <div id="error" class="alert alert-danger hide">

templates/docs/introduction.html

@@ -50,7 +50,7 @@ messages via the configured integrations.</dd>
 if a frequently running cron job has a known problem, and a fix is scheduled but
 not yet ready, you can pause monitoring of the corresponding check temporarily to
 avoid unwanted alerts about a known issue.</dd>
-<dt><span class="status ic-up"></span><div class="spinner started"><div class="d1"></div><div class="d2"></div><div class="d3"></div></div></dt>
+<dt><span class="status ic-up"></span><div class="spinner started"></div></dt>
 <dd>Additionally, if the most recent received signal is a "start" signal,
 this will be indicated by three animated dots under check's status icon.</dd>
 </dl>

templates/docs/introduction.md

@@ -58,7 +58,7 @@ Each check is always in one of the following states, depicted by a status icon:
     not yet ready, you can pause monitoring of the corresponding check temporarily to
     avoid unwanted alerts about a known issue.
 
-<span class="status ic-up"></span><div class="spinner started"><div class="d1"></div><div class="d2"></div><div class="d3"></div></div>
+<span class="status ic-up"></span><div class="spinner started"></div>
 :   Additionally, if the most recent received signal is a "start" signal,
     this will be indicated by three animated dots under check's status icon.
 

templates/front/details.html

@@ -116,11 +116,7 @@
             <h2>Current Status</h2>
             <div id="current-status-indicator">
                 <span id="current-status-icon" class="status ic-{{ check.get_status }}"></span>
-                <div id="current-status-spinner" class="spinner {% if check.last_start %}started{% endif %}">
+                <div id="current-status-spinner" class="spinner {% if check.last_start %}started{% endif %}"></div>
-                    <div class="d1"></div>
-                    <div class="d2"></div>
-                    <div class="d3"></div>
-                </div>
             </div>
             <div id="current-status-content">
                 <p id="current-status-text">{% include "front/log_status_text.html" %}</p>

templates/front/my_checks_desktop.html

@@ -63,9 +63,7 @@
     <tr id="{{ check.code }}" class="checks-row" {% if check in hidden_checks %}style="display: none"{% endif %}>
         <td class="indicator-cell">
             <span class="status ic-{{ check.get_status }}" data-toggle="tooltip"></span>
-            <div class="spinner {% if check.last_start %}started{% endif %}">
+            <div class="spinner {% if check.last_start %}started{% endif %}"></div>
-                <div></div><div></div><div></div>
-            </div>
         </td>
         <td>
             <div data-name="{{ check.name }}"