پیش‌نمایش زنده
کد HTML
<ul class="loader">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
کد CSS
@keyframes pound {
  to {
    transform: scale(1.2);
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.65), 2px 6px 12px 0 rgba(0, 0, 0, 0.5), 3px 8px 15px 0 rgba(0, 0, 0, 0.45)
  }
}

ul.loader {
  display: block;
  position: relative;
  width: 5em;
}

.loader li {
  list-style: none;
  display: block;
  float: left;
  width: 0.5em;
  height: 3em;
  margin: 0 0.5em 0 0;
  background: #635863;
  background: -moz-linear-gradient(top, #635863 0%, #3d353b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#635863),  color-stop(100%,#3d353b));
  background: -webkit-linear-gradient(top, #635863 0%,#3d353b 100%);
  background: -o-linear-gradient(top, #635863 0%,#3d353b 100%);
  background: -ms-linear-gradient(top, #635863 0%,#3d353b 100%);
  background: linear-gradient(to bottom, #635863 0%,#3d353b 100%);
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0), 1px 1px 1px 0 rgba(0, 0, 0, 0.0);
  animation: pound .7s ease-in-out infinite alternate;
  animation-delay: 0.05s;
  transform-origin: center;
}

.loader li:nth-child(2) {
  animation-delay: 0.20s;
}

.loader li:nth-child(3) {
  animation-delay: 0.35s;
}

.loader li:nth-child(4) {
  animation-delay: 0.50s;
}

.loader li:nth-child(5) {
  animation-delay: 0.65s;
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06