پیشنمایش زنده
کد HTML
<label class="loader">
<span class="slider"></span>
</label>
کد CSS
.loader {
font-size: 17px;
position: relative;
display: inline-block;
width: 8em;
height: 2em;
}
.slider {
position: absolute;
inset: 0;
background: #0974f1;
border-radius: 50px;
box-shadow: 0 0px 20px rgba(9, 117, 241, 0.4);
}
.slider:before {
position: absolute;
content: "";
height: 1.4em;
width: 1.4em;
left: 0.3em;
bottom: 0.3em;
background-color: white;
border-radius: 50px;
animation: move 1.5s cubic-bezier(0.23, 1, 0.320, 1) infinite alternate;
}
@keyframes move {
0% {
transform: translateX(0em) rotate(0deg);
}
100% {
transform: translateX(6em) rotate(270deg);
}
}