پیش‌نمایش زنده
کد HTML
<div class="loader">
  <div class="book">
    <div class="page"></div>
    <div class="page page2"></div>
  </div>
</div>
کد CSS
.loader {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  --book-color: #f1775b;
  --book-cover-color: #506c86;
}
.book {
  width: 150px;
  height: 13px;
  background-color: var(--book-color);
  border-bottom: 2px solid var(--book-cover-color);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
}
.page {
  width: 50%;
  height: 2px;
  background-color: var(--book-color);
  animation: paging 0.7s ease-out infinite;
  transform-origin: left;
}
.page2 {
  width: 50%;
  height: 2px;
  background-color: var(--book-color);
  animation: paging 0.8s ease-out infinite;
  transform-origin: left;
  position: absolute;
}
@keyframes paging {
  10% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-180deg);
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06