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

.l,.l:nth-child(9) {
  margin: 0.15em;
  border-radius: 5em;
  width: 0.4em;
  background-color: #f12711;
  height: 3em;
  box-shadow: 1px 1px 4px black;
  animation: load_5186 cubic-bezier(.41,.44,.72,.69) 2s infinite;
}

.l:nth-child(2), 
.l:nth-child(8) {
  background-color: #f24e13;
  animation-delay: .25s;
}

.l:nth-child(3), 
.l:nth-child(7) {
  background-color: #f36915;
  animation-delay: .5s;
}

.l:nth-child(4), 
.l:nth-child(6) {
  background-color: #f48c17;
  animation-delay: .75s;
}

.l:nth-child(5) {
  background-color: #f5af19;
  animation-delay: 1s;
}

@keyframes load_5186 {
  0% {
    transform: scaleY(1);
  }

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