/*loader*/
.loader {
position: relative;
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: gray;
margin: 32px auto;
box-shadow: 4px 4px 12px 1.2px rgba(0, 0, 0, 0.2);
-webkit-animation-name: static;
animation-name: static;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: steps(1);
animation-timing-function: steps(1);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.loader:before,
.loader:after {
position: absolute;
content: '';
display: block;
border-radius: inherit;
}
.loader:before {
-webkit-animation-name: static-half;
animation-name: static-half;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: steps(1);
animation-timing-function: steps(1);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.loader:after {
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
background-color: #226ad9;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.top {
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
}
.right {
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
}
.bottom {
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
}
.left {
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
}
@-webkit-keyframes flip {
0%,
100.001% {
background-color: #226ad9;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
12.5% {
background-color: #143f81;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
12.5001% {
background-color: #e87c6b;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
25% {
background-color: #cd3820;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
25.001% {
background-color: #cd3820;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
37.5% {
background-color: #752012;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
37.5001% {
background-color: #fed165;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
50% {
background-color: #fcb201;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
50.001% {
background-color: #fcb201;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
62.5% {
background-color: #fed165;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
62.5001% {
background-color: #00321d;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
75% {
background-color: #019757;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
75.001% {
background-color: #019757;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
89.5% {
background-color: #02fc91;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
89.5001% {
background-color: #143f81;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
background-color: #226ad9;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
}
@keyframes flip {
0%,
100.001% {
background-color: #226ad9;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
12.5% {
background-color: #143f81;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
12.5001% {
background-color: #e87c6b;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
25% {
background-color: #cd3820;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
25.001% {
background-color: #cd3820;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
37.5% {
background-color: #752012;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
37.5001% {
background-color: #fed165;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
50% {
background-color: #fcb201;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
50.001% {
background-color: #fcb201;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
62.5% {
background-color: #fed165;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
62.5001% {
background-color: #00321d;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
75% {
background-color: #019757;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
75.001% {
background-color: #019757;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
89.5% {
background-color: #02fc91;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
89.5001% {
background-color: #143f81;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
background-color: #226ad9;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
}
@-webkit-keyframes static-half {
0%,
100% {
background-color: #cd3820;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
}
25% {
background-color: #fcb201;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
}
50% {
background-color: #019757;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
}
75% {
background-color: #226ad9;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
}
}
@keyframes static-half {
0%,
100% {
background-color: #cd3820;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
}
25% {
background-color: #fcb201;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
}
50% {
background-color: #019757;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
}
75% {
background-color: #226ad9;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
}
}
@-webkit-keyframes static {
0%,
100% {
background-color: #226ad9;
}
25% {
background-color: #cd3820;
}
50% {
background-color: #fcb201;
}
75% {
background-color: #019757;
}
}
@keyframes static {
0%,
100% {
background-color: #226ad9;
}
25% {
background-color: #cd3820;
}
50% {
background-color: #fcb201;
}
75% {
background-color: #019757;
}
}