JSFiddle - React, Tailwind, and code Playground
by Сергей Тарасевич
HTML
<div class="circle_form">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2"></div>
</div>
CSS
/* PRELOAD */
.circle_form {
display:block;
}
.circle {
background:rgba(0,0,0,0);
border: 10px solid rgba(255, 97, 0, 0.9);
opacity:0.9;
border-left:10px solid rgba(0,0,0,0);
border-right:10px solid rgba(0,0,0,0);
border-radius:90px;
-webkit-box-shadow: 0 0 15px #FF6100;
-moz-box-shadow: 0 0 15px #FF6100;
box-shadow: 0 0 15px #FF6100;
width:90px;
height:90px;
margin:0 auto;
-webkit-animation:spinPulse 1s infinite linear;
-moz-animation:spinPulse 1s infinite linear;
-webkit-box-sizing:initial;
-moz-box-sizing:initial;
box-sizing:initial;
}
.circle1 {
background:rgba(0,0,0,0);
border: 10px solid rgba(255, 97, 0, 0.9);
opacity:0.9;
border-left:10px solid rgba(0,0,0,0);
border-right:10px solid rgba(0,0,0,0);
border-radius:60px;
-webkit-box-shadow: 0 0 15px #FF6100;
-moz-box-shadow: 0 0 15px #FF6100;
box-shadow: 0 0 15px #FF6100;
width:60px;
height:60px;
margin:0 auto;
position:relative;
top:-95px;
-webkit-animation:spinPulse1 1s infinite linear;
-moz-animation:spinPulse1 1s infinite linear;
-webkit-box-sizing:initial;
-moz-box-sizing:initial;
box-sizing:initial;
}
.circle2 {
background:rgba(0,0,0,0);
border: 10px solid rgba(255, 97, 0, 0.9);
opacity:0.9;
border-bottom:10px solid rgba(0,0,0,0);
border-top:10px solid rgba(0,0,0,0);
border-radius:30px;
-webkit-box-shadow: 0 0 15px #FF6100;
-moz-box-shadow: 0 0 15px #FF6100;
box-shadow: 0 0 15px #FF6100;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-160px;
-webkit-animation:spinPulse2 1s infinite linear;
-moz-animation:spinPulse2 1s infinite linear;
-webkit-box-sizing:initial;
-moz-box-sizing:initial;
box-sizing:initial;
}
@-moz-keyframes spinPulse {
0% {
-moz-transform:rotate(160deg);
opacity:0;
-webkit-box-shadow:0 0 1px #FF6100;
-moz-box-shadow:0 0 1px #FF6100;
box-shadow:0 0 1px #FF6100;
}
50% {
-moz-transform:rotate(145deg);
opacity:1;
}
100%...