پیشنمایش زنده
کد HTML
<div class="loader">
<div class="loaderBox1"></div>
<div class="loaderBox2"></div>
</div>
کد CSS
.loader {
position: relative;
width: 50px;
height: 50px;
}
.loader > div {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid;
border-radius: 5px;
}
.loaderBox1 {
animation: rotate 4.5s linear infinite reverse;
}
.loaderBox2 {
animation: rotate 3.5s linear infinite;
}
@keyframes rotate {
from {
background-color: rgba(0, 217, 255, 0.438);
transform: rotate(0deg);
}
to {
background-color: rgba(255, 153, 0, 0.11);
transform: rotate(360deg);
}
}