پیش‌نمایش زنده
کد HTML
<div class="loader">
  <div class="inner"></div>
</div>
کد CSS
.loader {
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-left-color: #385170;
  border-radius: 90%;
}

.loader {
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-left-color: #385170;
  width: 36px;
  height: 36px;
}

.loader {
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-left-color: #385170;
  width: 120px;
  height: 120px;
  animation: outeranim 1s linear infinite;
}

.inner {
  border: 2px solid #142d4c;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  margin-top: 43px;
  margin-left: 43px;
  animation: inneranim 1s ease-in-out infinite;
}

@keyframes outeranim {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes inneranim {
  0% {
    scale: 1;
    border-radius: 5px;
  }

  50% {
    scale: 1.2;
    border-radius: 12px;
  }

  100% {
    scale: 1;
    border-radius: 5px;
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06