پیش‌نمایش زنده
کد HTML
<div class="loader">
  <div class="trees-path"></div>
  <div class="sidewalk">
    <div class="sidewalk-shadow left"></div>
  </div>
  <div class="street">
    <div class="lines"></div>
  </div>
  <div class="sidewalk">
    <div class="sidewalk-shadow right"></div>
  </div>
  <div class="trees-path"></div>
</div>
کد CSS
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: perspective(70px) rotateX(55deg);
  overflow: hidden;
}

.street {
  width: 60px;
  height: 110px;
  background-color: #525c62;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lines {
  width: 5px;
  height: 100%;
  background: repeating-linear-gradient(
    #fff 0px,
    #fff 10px,
    transparent 10px,
    transparent 20px
  );
  animation: moveLines 0.6s linear infinite;
}

.trees-path {
  width: 20px;
  height: 110px;
  background-color: #696868;
}

.sidewalk {
  width: 8px;
  height: 110px;
  position: relative;
  background: repeating-linear-gradient(
    #fff 0px,
    #fff 11px,
    #313131 9px,
    #313131 19px
  );
  animation: moveLines 0.6s linear infinite;
}

.sidewalk-shadow {
  position: absolute;
  top: 0px;
  width: 5px;
  height: 100%;
  background: repeating-linear-gradient(
    #535353 0px,
    #535353 12.5px,
    #000 9px,
    #000 19px
  );
  animation: moveLines 0.6s linear infinite;
}

.left {
  left: 100%;
  transform: skew(0deg, 30deg);
}

.right {
  left: -5px;
  transform: skew(0deg, -30deg);
}

@keyframes moveLines {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 20px;
    /* Change this value based on your design */
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06