پیش‌نمایش زنده
کد HTML
<main class="container-loader">
  <aside class="loader"></aside>
</main>
کد CSS
.container-loader {
  position: relative;
  transform-style: preserve-3d;
  overflow: hidden;
  transform: translateX(0%);
  animation: perspective 20s linear infinite both;

  &,
  .loader {
    height: 100%;
    width: 100%;
  }

  .loader {
    --color: #00f;
    position: absolute;
    background: repeating-linear-gradient(
        transparent 0 30px,
        var(--color) 31px 32px
      ),
      repeating-linear-gradient(
        to right,
        transparent 0 30px,
        var(--color) 31px 32px
      );
    border-left: 1px solid var(--color);
    border-top: 1px solid var(--color);
    transform: rotateX(37deg);
    top: 0;
  }
}

@keyframes perspective {
  0% {
    perspective: 1px;
  }

  100% {
    perspective: 50px;
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06