پیش‌نمایش زنده
کد HTML
<div class="loader"></div>
کد CSS
.loader {
  width: 3rem;
  height: 3rem;
  clear: both;
  margin: 1rem auto;
  border: 2px #fff solid;
  border-radius: 100%;
  overflow: hidden;
  position: relative;
}

.loader:after,
.loader:before {
  content: "";
  border-radius: 50%;
  position: absolute;
  width: inherit;
  height: inherit;
  animation: spVortex 2s infinite linear;
}

.loader:before {
  border-top: 0.5rem #fff solid;
  top: -0.1875rem;
  left: calc(-50% - 0.1875rem);
  transform-origin: right center;
}

.loader:after {
  border-bottom: 0.5rem #fff solid;
  top: 0.1875rem;
  right: calc(-50% - 0.1875rem);
  transform-origin: left center;
}

@keyframes spVortex {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06