سورس کد انیمیشن لودینگ صفحه با CSS (۳ مدل آماده + پیش‌لودر)

<div class="loader" role="status" aria-label="در حال بارگذاری"></div>

.loader {
  --size: 80px;
  --thickness: 10px;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#ec4899, #ef4444, #eab308, transparent 80%);
  /* سوراخ وسط حلقه با mask؛ روی هر پس‌زمینه‌ای درست دیده می‌شود */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 1px));
  animation: loader-spin .8s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

<div class="dots" role="status" aria-label="در حال بارگذاری">
  <span></span><span></span><span></span>
</div>

.dots { display: flex; gap: 8px; }
.dots span {
  width: 14px; height: 14px; border-radius: 50%;
  background: #5f01af;
  animation: dots-bounce .6s ease-in-out infinite alternate;
}
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }

@keyframes dots-bounce {
  to { transform: translateY(-14px); opacity: .4; }
}

.line-loader {
  width: 160px; height: 6px; border-radius: 99px;
  background: #ede4fa; overflow: hidden; position: relative;
}
.line-loader::before {
  content: ""; position: absolute; inset: 0; width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8224e3, #5f01af);
  animation: line-move 1.1s ease-in-out infinite;
}
@keyframes line-move {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}

/* برای کاربرانی که حرکت کمتر می‌خواهند */
@media (prefers-reduced-motion: reduce) {
  .loader, .dots span, .line-loader::before { animation-duration: 2.5s; }
}

<div id="preloader">
  <div class="loader" role="status" aria-label="در حال بارگذاری"></div>
</div>

#preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: #fff;
  transition: opacity .4s, visibility .4s;
}
#preloader.is-hidden { opacity: 0; visibility: hidden; }

const preloader = document.getElementById('preloader');
const hide = () => preloader && preloader.classList.add('is-hidden');

window.addEventListener('load', hide);   // بعد از بارگذاری کامل صفحه
setTimeout(hide, 2500);                   // حداکثر ۲.۵ ثانیه، حتی اگر load دیر شود