maket/MaketRandevu
1
1
Fork 0
Code Issues 15 Pull requests Projects Releases 4 Packages Wiki Activity

Improved loading spinner styling.

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/application/views/backend/header.php
View file

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

57
src/assets/css/general.css
View file

@ -322,3 +322,60 @@ li.language:hover {
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before { .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before {
display: none; 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;
}