پیشنمایش زنده
کد HTML
<div class="loader"></div>
کد CSS
.loader {
position: relative;
width: 50px;
height: 50px;
background: linear-gradient(to left, #000, #222);
border-radius: 50%;
animation: animate 1s linear infinite;
z-index: 1;
}
.loader::before {
content: "8";
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
position: absolute;
background: white;
text-align: center;
color: #000;
font-weight: 800;
width: 20px;
height: 20px;
border-radius: 50%;
top: 40%;
left: 40%;
transform: translate(-50%, -50%);
}
@keyframes animate {
0% {
transform: rotate(0);
}
50% {
transform: rotate(3.1415rad);
}
100% {
transform: rotate(720deg);
}
}