91 lines
2.2 KiB
CSS
91 lines
2.2 KiB
CSS
@-moz-keyframes timer-loader {
|
|
0% {
|
|
-moz-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-moz-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@-webkit-keyframes timer-loader {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes timer-loader {
|
|
0% {
|
|
-moz-transform: rotate(0deg);
|
|
-ms-transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-moz-transform: rotate(360deg);
|
|
-ms-transform: rotate(360deg);
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
/* :not(:required) hides this rule from IE9 and below */
|
|
.timer-loader:not(:required) {
|
|
border: 6px solid #c8d;
|
|
-moz-border-radius: 24px;
|
|
-webkit-border-radius: 24px;
|
|
border-radius: 24px;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
position: relative;
|
|
text-indent: -9999px;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
.timer-loader:not(:required)::before {
|
|
-moz-animation: timer-loader 1250ms infinite linear;
|
|
-webkit-animation: timer-loader 1250ms infinite linear;
|
|
animation: timer-loader 1250ms infinite linear;
|
|
-moz-transform-origin: 3px 3px;
|
|
-ms-transform-origin: 3px 3px;
|
|
-webkit-transform-origin: 3px 3px;
|
|
transform-origin: 3px 3px;
|
|
background: #c8d;
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
width: 6px;
|
|
height: 19.2px;
|
|
left: 15px;
|
|
top: 15px;
|
|
}
|
|
.timer-loader:not(:required)::after {
|
|
-moz-animation: timer-loader 15000ms infinite linear;
|
|
-webkit-animation: timer-loader 15000ms infinite linear;
|
|
animation: timer-loader 15000ms infinite linear;
|
|
-moz-transform-origin: 3px 3px;
|
|
-ms-transform-origin: 3px 3px;
|
|
-webkit-transform-origin: 3px 3px;
|
|
transform-origin: 3px 3px;
|
|
background: #c8d;
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
width: 6px;
|
|
height: 16px;
|
|
left: 15px;
|
|
top: 15px;
|
|
}
|