پیش‌نمایش زنده
کد HTML
<div class="loader"> 
      <span class="ani">L</span> 
      <span class="ani">o</span>
      <span class="ani">a</span>
      <span class="ani">d</span> 
      <span class="ani">i</span> 
      <span class="ani">n</span> 
      <span class="ani">g</span>
</div>
کد CSS
.loader {
  font-family: Roboto, sans-serif;
  font-size: 25px;
  font-weight: 600;
}

.ani:nth-child(1) {
  animation: ani1 2.1s ease-in-out 14s infinite;
}

@keyframes ani1 {
  50% {
    font-size: 40px;
  }
}

.ani:nth-child(2) {
  animation: ani2 2.1s ease-in-out 12s infinite;
}

@keyframes ani2 {
  50% {
    font-size: 40px;
  }
}

.ani:nth-child(3) {
  animation: ani3 2.1s ease-in-out 10s infinite;
}

@keyframes ani3 {
  50% {
    font-size: 40px;
  }
}

.ani:nth-child(4) {
  animation: ani4 2.1s ease-in-out 8s infinite;
}

@keyframes ani4 {
  50% {
    font-size: 40px;
  }
}

.ani:nth-child(5) {
  animation: ani5 2.1s ease-in-out 6s infinite;
}

@keyframes ani5 {
  50% {
    font-size: 40px;
  }
}

.ani:nth-child(6) {
  animation: ani6 2.1s ease-in-out 4s infinite;
}

@keyframes ani6 {
  50% {
    font-size: 40px;
  }
}

.ani:nth-child(7) {
  animation: ani7 2.1s ease-in-out 2s infinite;
}

@keyframes ani7 {
  50% {
    font-size: 40px;
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06