preloader

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

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

index.htmldiv.preloader#preloader

Summary

Fixed full-viewport preloader displayed before page paint, hidden via JS on DOMContentLoaded by setting display: none. Inner element is a CSS spinner (.loader).

HTML structure (minimal)

<div class="preloader" id="preloader">
  <div class="loader"></div>
</div>

Key SCSS tokens

.preloader {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--white);
  display: grid; place-items: center;
}
.loader {
  width: 60px; aspect-ratio: 1;
  border: 4px solid var(--ul-c3);
  border-top-color: var(--ul-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Animation logic

// main.js — first thing on DOMContentLoaded
document.addEventListener("DOMContentLoaded", () => {
  const preloader = document.getElementById('preloader');
  preloader.style.display = 'none';
  document.body.style.position = 'static';
});

Notable details

Preloader is hidden via inline display: none rather than fading out — instant disappearance, simplest possible DX.
The body is set to position: fixed in the global SCSS and reset to static only after preload is over — prevents scrolling during page boot.
Spinner uses just one <div> plus a single keyframe — no SVG, no extra markup.
Lives at the very top of <body> so it paints before any other section, even before fonts/CSS finishes for slow networks.

Use when

Sites that want to mask the body until DOM-ready to avoid flash-of-unstyled-content.
Slow-loading templates with many vendor scripts that benefit from a unified spinner moment.

Caveats

The preloader is auto-hidden on DOMContentLoaded, NOT on window.load — large images may still pop in after.
Inherently visible only briefly — the screenshot pipeline at 1440x900 will likely capture it as already hidden, so its component thumbnail may fall back to the palette gradient placeholder.
No fade-out transition; production may want opacity + visibility for a softer dismissal.