preloader

Лоадер·Шаблон: Kanun - Attorney & Law Agency HTML Template·Складність анімації: subtle·Адаптивний: Так

Файли-джерела

index.htmlbody > div.loader-box

Бібліотеки

jquery

Summary

Full-screen white preloader covering the page on first paint. A centred .loader element shows a spinner; on window.ready jQuery fades the box out and removes the body scroll lock.

HTML structure (minimal)

<body>
  <div class="loader-box">
    <div class="loader"></div>
  </div>
  <!-- rest of site -->
</body>

Key SCSS tokens

.loader-box {
  position: fixed;
  inset: 0;
  background: var(--white);
  display: grid;
  place-items: center;
  z-index: 9999;
}
.loader {
  width: 56px; height: 56px;
  border: 4px solid var(--bg);
  border-top-color: var(--theme);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
body.fixed { overflow: hidden; }

Animation logic

$(window).ready(function () {
  $(".loader-box").fadeOut();
  $("body").removeClass("fixed");
});

Notable details

Uses a single CSS keyframe (spin) rather than an SVG/Lottie — minimal payload, no extra HTTP requests.
body.fixed (set elsewhere) locks scroll until window-ready fires; mobile users won't pull-to-refresh during the loader.
Z-index 9999 keeps the loader above the custom cursor too.

Use when

Sites with heavy hero photography that need a paint mask while images stream in.
Any single-page templates where a flash-of-unstyled-content needs covering.

Caveats

Inherently hidden post-load: the screenshot pipeline cannot capture this in its on-screen state. The selector points to the (already-faded) .loader-box element which still exists in the DOM but has display: none after fadeOut. Expect the placeholder gradient.
Hard-coded white background ignores any future dark mode.