پیشنمایش زنده
کد HTML
<div class="loader">
<div class="loader_cube loader_cube--color"></div>
<div class="loader_cube loader_cube--glowing"></div>
</div>
کد CSS
.loader {
width: 200px;
height: 200px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.loader_cube {
position: absolute;
width: 80%;
height: 80%;
border-radius: 10px;
}
.loader_cube--glowing {
z-index: 2;
background-color: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.loader_cube--color {
z-index: 1;
filter: blur(4px);
background: linear-gradient(45deg, #ffca18, #ff6f00);
animation: loadtwo 3s ease-in-out infinite;
}
@keyframes loadtwo {
50% {
transform: rotate(-90deg);
}
}