archive/healthchecks_healthchecks
0
0
Fork 0
mirror of https://github.com/healthchecks/healthchecks.git synced 2025-04-03 04:15:29 +00:00
Code Issues Projects Releases Wiki Activity

Optimize the spinner animation

Browse source 
Use a CSS box-shadow trick to implement it with just a single
DOM element instead of four.
This commit is contained in:
Pēteris Caune 2022-07-07 10:25:13 +03:00
parent 1f27d3c9cd
commit 3c43e5aa45
No known key found for this signature in database
GPG key ID: E28D7679E9A9EDE2
8 changed files with 19 additions and 53 deletions

2
static/css/add_credential.css
View file

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

49
static/css/base.css
View file

@ -192,50 +192,25 @@ pre {
.spinner {
display: none;
width: 24px;
height: 8px;
margin: 4px auto 0 auto;
width: 4px;
height: 4px;
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 {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
0% {box-shadow: 8px 0 #aaaaaa99, -8px 0 #aaaaaa00; background: #aaaaaa4c }
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; }
65% {box-shadow: 8px 0 #aaaaaab2, -8px 0 #aaaaaab2; background: #aaaaaaff }
80% {box-shadow: 8px 0 #aaaaaaff, -8px 0 #aaaaaa66; }
100% {box-shadow: 8px 0 #aaaaaa99, -8px 0 #aaaaaa00; background: #aaaaaa4c }
}
.nav-tabs > li.active > a,

1
static/css/my_checks_desktop.css
View file

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

6
templates/accounts/login_webauthn.html
View file

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

2
templates/docs/introduction.html
View file

@ -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>

2
templates/docs/introduction.md
View file

@ -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.

6
templates/front/details.html
View file

@ -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 class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
<div id="current-status-spinner" class="spinner {% if check.last_start %}started{% endif %}"></div>
</div>
<div id="current-status-content">
<p id="current-status-text">{% include "front/log_status_text.html" %}</p>

4
templates/front/my_checks_desktop.html
View file

@ -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></div><div></div><div></div>
</div>
<div class="spinner {% if check.last_start %}started{% endif %}"></div>
</td>
<td>
<div data-name="{{ check.name }}"