console
<div class="loading"></div>
.loading{
margin: 100px auto;
width: 30px;
height: 30px;
border-radius: 50%;
animation: loading 2s linear infinite;
/* background: red */
background-color: transparent;
}
@keyframes loading{
0% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
inset 0 0 0 15px rgba(250, 189, 189, 0),
40px 0 0 rgba(250, 189, 189, 0);
}
30% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 1),
inset 0 0 0 15px rgba(250, 189, 189, 0),
40px 0 0 rgba(250, 189, 189, 0);
}
60% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
inset 0 0 0 15px rgba(250, 189, 189, 1),
40px 0 0 rgba(250, 189, 189, 0);
}
100% {
box-shadow: -40px 0 0 rgba(250, 189, 189, 0),
inset 0 0 0 15px rgba(250, 189, 189, 0),
40px 0 0 rgba(250, 189, 189, 1);
}
}