پیش‌نمایش زنده
کد HTML
<div class="blocks">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>
کد CSS
.blocks {
  border: 2px solid #2b83e2;
  max-width: 158px;
  padding: 4px;
  border-radius: 8px;
  gap: 4px;
  display: flex;
  flex-wrap: wrap;
}
.blocks .block {
  display: flex;
  flex: 1;
  border-radius: 4px;
  background: #2b83e2;
  width: 75px;
  height: 75px;
  animation: blockLoading 1s infinite;
}
.blocks .block:nth-child(1) {
  animation-delay: 0ms;
}
.blocks .block:nth-child(2) {
  animation-delay: 200ms;
}
.blocks .block:nth-child(3) {
  animation-delay: 400ms;
}
.blocks .block:nth-child(4) {
  animation-delay: 600ms;
}
@keyframes blockLoading {
  0%,
  100% {
    flex: 1;
  }
  50% {
    flex: 4;
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06