<div class="spinner"><i></i></div>
body {
background: #f7f7f7;
}
.spinner {
font-size: 100px;
width: 1em;
height: 1em;
margin: 100px auto;
border-radius: 50%;
box-shadow: inset 0 0 0 .1em rgba(58, 168, 237, .2);
}
.spinner i {
position: absolute;
width: 1em;
height: 1em;
}
.spinner i:before {
position: absolute;
z-index: 2;
clip: rect(0, 1em, 1em, .5em);
width: 1em;
height: 1em;
content: '';
animation: spinner-circle-clipper 5s ease-in-out infinite;
background: rgba(255, 0, 0, .2);
}
@keyframes spinner-circle-clipper {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.spinner i:after {
position: absolute;
clip: rect(0, 1em, 1em, .5em);
width: 1em;
height: 1em;
content: '';
animation: spinner-circle 5s ease-in-out infinite;
border-radius: 50%;
box-shadow: inset 0 0 0 .1em #3aa8ed;
}
@keyframes spinner-circle {
0% {
transform: rotate(-180deg);
}
100% {
transform: rotate(360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.