پیش‌نمایش زنده
کد HTML
<div class="spinner">
  <div class="spinner1"></div>
  <div class="circle"></div>
</div>

کد CSS
.spinner {
  background-image: linear-gradient(rgb(0, 144, 255) 35%, rgb(0, 0, 255));
  width: 100px;
  height: 100px;
  animation: spinning82341 1.7s linear infinite;
  text-align: center;
  border-radius: 50px;
  filter: blur(1px);
  box-shadow: 0px -5px 20px 0px rgb(0, 144, 255), 0px 5px 20px 0px rgb(0, 0, 255);
  position: relative;
}

.spinner1 {
  background-color: rgb(0, 0, 255);
  width: 100px;
  height: 100px;
  border-radius: 50px;
  filter: blur(10px);
  animation: flickeringGlow 2s linear infinite;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
}

@keyframes spinning82341 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes flickeringGlow {
  0% {
    box-shadow: 0px -10px 40px 0px rgb(0, 144, 255), 0px 10px 40px 0px rgb(0, 0, 255), 0px 0px 20px 0px white;
  }
  
  /* ...rest of the keyframes remain the same... */
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06