HTML
<div class="main">
<div class="box"></div>
</div>
<div class="main">
<div class="box"></div>
</div>
<div class="main"> <div class="box"></div> </div>
CSS
.main {
width: 100px;
border: 1px solid #ffffff;
height: 5px;
border-radius: 10px;
z-index: 2px;
padding: 2px;
}
.box {
border-radius: 10px;
width: 100px;
height: 5px;
background-color: #13aaaa;
animation: anima;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes anima {
from {
width: 0px;
}
to {
width: 100px;
}
}
.main {
width: 100px;
border: 1px solid #ffffff;
height: 5px;
border-radius: 10px;
z-index: 2px;
padding: 2px;
}
.box {
border-radius: 10px;
width: 100px;
height: 5px;
background-color: #13aaaa;
animation: anima;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes anima {
from {
width: 0px;
}
to {
width: 100px;
}
}
.main { width: 100px; border: 1px solid #ffffff; height: 5px; border-radius: 10px; z-index: 2px; padding: 2px; } .box { border-radius: 10px; width: 100px; height: 5px; background-color: #13aaaa; animation: anima; animation-duration: 4s; animation-iteration-count: infinite; } @keyframes anima { from { width: 0px; } to { width: 100px; } }