CSS
body {
background: #2c3e50;
position: relative;
width: 50vh;
height: 50vh;
transform: translate(calc(50vw - 25vh),25vh);
}
@media (max-width: 100vh) {
body {
width: 50vw;
height: 50vw;
transform: translate(25vw,calc(50vh - 25vw));
}
}
spinner .color1 {
background: #333;
}
spinner .color2 {
background: #2980b9;
}
spinner {
display: block;
width: 100%;
padding-bottom: 100%;
border-radius: 50%;
transform: scale(1);
overflow: hidden;
border: 8px solid #333;
}
spinner .spinner {
position: absolute;
height: calc(100% + 2px);
width: calc(100% + 2px);
left: -1px;
top: -1px;
animation: spinner-rotation .5s infinite linear;
}
spinner .inner-circle {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: 50%;
animation: spinner-inner-circle-size 1.6s infinite cubic-bezier(.75,.2,.25,.8);
}
spinner .inner-circle.top {
animation-direction: alternate-reverse;
transform-origin: 50% 0%;
}
spinner .inner-circle.bottom {
animation-direction: alternate;
transform-origin: 50% 100%;
}
spinner .half {
height: 100%;
width: 50%;
position: absolute;
}
spinner .half.right{
right: 0;
}
@keyframes spinner-inner-circle-size {
0% { transform: scale(0); }
20% { transform: scale(0); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}
@keyframes spinner-rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
