JSFiddle - React, Tailwind, and code Playground
by Vitaliy
HTML
<div id="outer" class="toCenter"><div id="inner"></div></div>
CSS
#outer{position:absolute;}
#outer:after{
content:' ';
display:block;
position:absolute;
top:-1px;
z-index:100;
border:80px solid transparent;
border-bottom:80px solid red;
width:1px;
border-bottom-left-radius:100%;
border-bottom-right-radius:100%;
-webkit-animation-name:fourth;
-webkit-animation-duration:1s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-delay:2s;
animation-name:fourth;
animation-duration:1s;
animation-fill-mode:forwards;
animation-delay:2s;
}
#inner:before{
content:' ';
display:block;
position:absolute;
left:1px;
z-index:100;
border:80px solid transparent;
border-left:80px solid red;
width:1px;
border-top-left-radius:100%;
border-bottom-left-radius:100%;
-webkit-animation-name:third;
-webkit-animation-duration:1s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-delay:2s;
animation-name:third;
animation-duration:1s;
animation-fill-mode:forwards;
animation-delay:2s;
}
#inner:after{
content:' ';
display:block;
position:absolute;
left:-1px;
z-index:100;
border:80px solid transparent;
border-right:80px solid red;
width:1px;
border-top-right-radius:100%;
border-bottom-right-radius:100%;
-webkit-animation-name:first;
-webkit-animation-duration:1s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-delay:2s;
animation-name:first;
animation-duration:1s;
animation-fill-mode:forwards;
animation-delay:2s;
}
#outer:before{
content:' ';
display:block;
position:absolute;
top:1px;
z-index:100;
border:80px solid transparent;
border-top:80px solid red;
width:1px;
border-top-left-radius:100%;
border-top-right-radius:100%;
-webkit-animation-name:second;
-webkit-animation-duration:1s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-delay:2s;
...