پیش‌نمایش زنده
کد HTML
<div class="loader">
  <div class="leaf"></div>
  <div class="leaf"></div>
  <div class="leaf"></div>
</div>
کد CSS
.loader {
  display: flex;
  gap: .5em;
}

.leaf {
  width: 1em;
  height: 3em;
  background-color: rgb(0, 0, 0,.3);
  clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 81%);
  transform: rotate(-30deg);
  animation: color 1200ms infinite;
  animation-delay: 800ms;
}

.leaf:nth-child(2) {
  clip-path: polygon(0% 35%,100% 35%,100% 100%,0% 81%);
  animation-delay: 400ms;
}

.leaf:nth-child(1) {
  clip-path: polygon(0% 70%,100% 70%,100% 100%,0% 81%);
  animation-delay: 0ms;
}

@keyframes color {
  from {
    background-color: lightblue;
  }

  to {
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06