پیش‌نمایش زنده
کد HTML
<div class="stage">
  <div class="grid">
    <div class="strip">
      <div class="tip delay-18"></div>
      <div class="tip reverse delay-17"></div>
      <div class="tip delay-16"></div>
      <div class="tip reverse delay-15"></div>
      <div class="tip delay-14"></div>
    </div>
    <div class="strip">
      <div class="tip delay-01"></div>
      <div class="tip reverse delay-02"></div>
      <div class="tip delay-f"></div>
      <div class="tip reverse delay-e"></div>
      <div class="tip delay-d"></div>
      <div class="tip reverse delay-13"></div>
      <div class="tip delay-12"></div>
    </div>
    <div class="strip">
      <div class="tip reverse delay-03"></div>
      <div class="tip delay-04"></div>
      <div class="tip reverse delay-a"></div>
      <div class="tip delay-b"></div>
      <div class="tip reverse delay-c"></div>
      <div class="tip delay-11"></div>
      <div class="tip reverse delay-10"></div>
    </div>
    <div class="strip">
      <div class="tip reverse delay-05"></div>
      <div class="tip delay-06"></div>
      <div class="tip reverse delay-07"></div>
      <div class="tip delay-08"></div>
      <div class="tip reverse delay-09"></div>
    </div>
  </div>
</div>
کد CSS
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.strip {
  display: flex;
}
.tip {
  width: 0;
  height: 0;
  margin: 0 -6px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 22px solid #48fd00;
  filter: drop-shadow(0 0 18px #65fc0d);
  animation: pulse 1s infinite;
}
.tip.reverse {
  transform: rotate(180deg);
}
.delay-01 {
  animation-delay: -0.05s;
}
.delay-02 {
  animation-delay: -0.1s;
}
.delay-03 {
  animation-delay: -0.15s;
}
.delay-04 {
  animation-delay: -0.2s;
}
.delay-05 {
  animation-delay: -0.25s;
}
.delay-06 {
  animation-delay: -0.3s;
}
.delay-07 {
  animation-delay: -0.35s;
}
.delay-08 {
  animation-delay: -0.4s;
}
.delay-09 {
  animation-delay: -0.45s;
}
.delay-10 {
  animation-delay: -0.5s;
}
.delay-11 {
  animation-delay: -0.55s;
}
.delay-12 {
  animation-delay: -0.6s;
}
.delay-13 {
  animation-delay: -0.65s;
}
.delay-14 {
  animation-delay: -0.7s;
}
.delay-15 {
  animation-delay: -0.75s;
}
.delay-16 {
  animation-delay: -0.8s;
}
.delay-17 {
  animation-delay: -0.85s;
}
.delay-18 {
  animation-delay: -0.9s;
}
.delay-19 {
  animation-delay: -0.95s;
}
.delay-20 {
  animation-delay: -1s;
}

.delay-a {
  animation-delay: -0.17s;
}
.delay-b {
  animation-delay: -0.33s;
}
.delay-c {
  animation-delay: -0.5s;
}
.delay-d {
  animation-delay: -0.67s;
}
.delay-e {
  animation-delay: -0.83s;
}
.delay-f {
  animation-delay: -1s;
}

@keyframes pulse {
  0% {
    opacity: 0.1;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06