پیش‌نمایش زنده
کد HTML
<div class="loader-1">
  <div class="loader-2"></div>
  <div class="loader-3"></div>
  <div class="loader-4"></div>
</div>
کد CSS
.loader-1 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid rgb(218, 203, 4);
  border-left-color: transparent;
  animation: animate_681 3s linear infinite;
  position: relative;
}

.loader-2 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 5px solid rgb(0, 119, 255);
  border-top-color: transparent;
  animation: animate_6810 .9s linear infinite;
  position: absolute;
  margin: 5px;
}

.loader-3 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px solid rgb(30, 255, 0);
  border-right-color: transparent;
  animation: animate_681 2s linear  infinite;
  position: absolute;
  margin: 15px;
}

.loader-4 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 5px solid rgb(194, 3, 92);
  border-bottom-color: transparent;
  animation: animate_6810 .7s linear  infinite;
  position: absolute;
  margin: 25px;
}

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

@keyframes animate_681 {
  0% {
    transform: rotate(-360deg);
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06