پیشنمایش زنده
کد HTML
<div class="loader"></div>
کد CSS
.loader {
width: 64px;
height: 64px;
background: #ff6b6b;
display: block;
margin: 20px auto;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::before {
content: '';
box-sizing: border-box;
left: 0;
top: 0;
transform: rotate(45deg);
position: absolute;
width: 64px;
height: 64px;
background: #ff3d3d;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.loader::after {
content: '';
box-sizing: border-box;
width: 48px;
height: 48px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
background: rgb(255, 107, 107);
transform: translate(-50%, -50%);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}