console
<div class="loop"></div>
<div class="shaking-loop"></div>
<div class="shaking-ring"></div>
$size: 100px;
$borderwidth: 10px;
$shankwidth: 3px;
@keyframes rotating{
from{ transform:rotate(0) }
to{ transform:rotate(360deg) }
}
.loop{
width: $size;
height: $size;
border-radius: $size/2;
animation: rotating 1s linear infinite;
background: linear-gradient(to right,dodgerblue,pink,gold);
&:before{
content: '';
display: inline-block;
margin: $borderwidth;
width: $size - 2*$borderwidth;
height: $size - 2*$borderwidth;
border-radius: ($size - $borderwidth)/2;
background: #fff;
}
}
.shaking-loop{
width: $size;
height: $size;
border-radius: $size/2;
animation: rotating 2s linear infinite;
background: linear-gradient(to right,dodgerblue,pink,gold);
&:before{
content: '';
display: inline-block;
width: $size - $shankwidth;
height: $size - $shankwidth;
border-radius: ($size - $shankwidth)/2;
background: #fff;
}
}
.shaking-ring{
width: $size;
height: $size;
border-radius: $size/2;
background: #7fecad;
animation: rotating 2s linear infinite;
&:before{
content: '';
display: inline-block;
position: absolute;
width: $size - $shankwidth;
height: $size - $shankwidth;
border-radius: ($size - $shankwidth)/2;
margin: $shankwidth/2;
background: yellow;
}
&:after{
content: '';
display: inline-block;
position: absolute;
width: $size - 2*$shankwidth;
height: $size - 2*$shankwidth;
border-radius: ($size - 2*$shankwidth)/2;
margin: $shankwidth;
background: #fff;
}
}