Improved loading spinner styling.

This commit is contained in:
alext 2017-11-15 23:35:11 +01:00
parent 6408bc143f
commit 26138c6586
2 changed files with 58 additions and 1 deletions

View file

@ -107,7 +107,7 @@
<div id="notification" style="display: none;"></div>
<div id="loading" style="display: none;">
<div class="any-element animation-dial is-loading">
<div class="any-element animation is-loading">
&nbsp;
</div>
</div>

View file

@ -322,3 +322,60 @@ li.language:hover {
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before {
display: none;
}
/* LOADING SPINNER
------------------------------------------------------------------------- */
.is-loading {
position: relative;
}
.is-loading:before,
.is-loading:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
}
.animation:after {
width: 60px;
height: 60px;
margin: -25px 0 0 -25px;
border: 5px solid rgba(0, 0, 0, .4);
border-radius: 50px;
}
.animation:after {
border-bottom-color: transparent;
animation: spin 1s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.any-element {
width: 60px;
height: 60px;
position: fixed;
left: 50vw;
top: 50vh;
margin-left: -30px;
margin-bottom: -30px;
}