Check out my code snippet below:
.circle {
border: 1px solid transparent;
border-radius: 50%;
width: 100px;
overflow: hidden;
}
.div7 {
width: 100px;
height: 10px;
background: red;
color: white;
font-weight: bold;
position: relative;
animation: mymove 6s infinite ;
}
.div6 {
width: 100px;
height: 10px;
background: red;
color: white;
font-weight: bold;
position: relative;
animation: mymove 6s infinite ;
margin-top:5px;
}
.div1 {
width: 100px;
height: 10px;
background: red;
color: white;
font-weight: bold;
position: relative;
animation: mymove 6s infinite ;
margin-top:5px;
}
.div2 {
width: 100px;
height: 10px;
background: red;
color: white;
font-weight: bold;
position: relative;
animation: mymove 6s infinite ;
margin-top:5px;
}
.div3 {
width: 100px;
height: 10px;
background: red;
color: white;
font-weight: bold;
position: relative;
animation: mymove 6s infinite ;
margin-top:5px;
}
.div4 {
width: 100px;
height: 10px;
background: red;
color: white;
font-weight: bold;
position: relative;
animation: mymove 6s infinite ;
margin-top:5px;
}
.div5 {
width: 100px;
height: 10px;
background: red;
color: white;
font-weight: bold;
position: relative;
animation: mymove 6s infinite ;
margin-top:5px;
}
#div7 {animation-timing-function: cubic-bezier(0.6,0,1,1);}
#div6 {animation-timing-function: cubic-bezier(0.5,0,1,1);}
#div1 {animation-timing-function: cubic-bezier(0.4,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.3,0,1,1);}
#div3 {animation-timing-function: cubic-bezier(0.2,0,0.58,1);}
#div4 {animation-timing-function: cubic-bezier(0.1,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0,1,1,1);}
@keyframes mymove {
0%{
opacity: 0;
left: 80%;
}
50%{
opacity: 1;
left: 45%;
}
100%{
opacity: 0;
left: 10%;
}
}<div class="circle">
<div id="div7" class="div7"></div>
<div id="div6" class="div6"></div>
<div id="div1" class="div1"></div>
<div id="div2" class="div2"></div>
<div id="div3" class="div3"></div>
<div id="div4" class="div4"></div>
<div id="div5" class="div5"></div>
</div>I have created a unique loader design with seven lines.
Upon loading the page, the bottom line moves from right to stop in the center until the second line reaches the center. Subsequently, both the first and second lines wait for the third line, continuing this process until all lines converge at the center.
Once all lines meet at the center, they form a circular pattern for some time before starting to move back outwards in sequence, starting from the bottom line towards the left side.
This series of movements repeats in an infinite loop as part of the loader animation.