.spinner-outer {
position: relative;
width: 18vh;
height: 18vh;
border: solid #eee 3px;
border-radius: 50%;
}
.spinner {
position: absolute;
width: 18vh;
height: 18vh;
top: 0;
left: 0;
border-radius: 50%;
box-shadow: 0 0.6vh 0.6vh #0c2340;
-ms-animation: uil-ring-anim 1s linear infinite;
-moz-animation: uil-ring-anim 1s linear infinite;
-webkit-animation: uil-ring-anim 1s linear infinite;
-o-animation: uil-ring-anim 1s linear infinite;
animation: uil-ring-anim 1s linear infinite;
}
.reverse {
animation: uil-ring-anim-rev 1s linear infinite;
box-shadow: 0 0.6vh 0.6vh orange;
}
.green {
animation: uil-ring-anim-green 1s linear infinite;
box-shadow: 0 0.6vh 0.6vh green;
}
.teal {
animation: uil-ring-anim-teal 1s linear infinite;
box-shadow: 0 0.6vh 0.6vh teal;
}
@keyframes uil-ring-anim {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes uil-ring-anim-rev {
0% {
transform: rotate(90deg);
}
100% {
transform: rotate(-270deg);
}
}
@keyframes uil-ring-anim-green {
0% {
transform: rotate(180deg);
}
100% {
transform: rotate(540deg);
}
}
@keyframes uil-ring-anim-teal {
0% {
transform: rotate(270deg);
}
100% {
transform: rotate(-90deg);
}
}