پیش‌نمایش زنده
کد HTML
<div class="cube">
  <div class="cube_item cube_x"></div>
  <div class="cube_item cube_y"></div>
  <div class="cube_item cube_y"></div>
  <div class="cube_item cube_x"></div>
</div>
کد CSS
.cube {
  height: 80px;
  width: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cube_item {
  height: 40px;
  width: 40px;
  border-radius: 10px;
  transition: all 0.2s ease-in;
}

.cube_x {
  background-color: blueviolet;
  animation: animateLoaders 1s infinite;
}

.cube_y {
  background-color: aqua;
  animation: animateLoaders 1s 0.5s infinite;
}

@keyframes animateLoaders {
  0% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(0.8);
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06