preloader

Summary

Fixed full-screen white preloader shown on page load. Inside it sits a four-dot bouncing CSS animation. After 2 seconds, jQuery removes the entire preloader from the DOM.

HTML structure (minimal)

<div class="preloader">
  <div class="loading">
    <span></span><span></span><span></span><span></span>
  </div>
</div>

Key SCSS tokens

.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: $color-white;
  display: flex; align-items: center; justify-content: center;
}
.loading {
  display: inline-flex; gap: 8px;
  span {
    width: 14px; height: 14px; border-radius: 50%;
    background: $color-primary;
    animation: loadingBounce 1.2s ease-in-out infinite both;
  }
  span:nth-child(1) { animation-delay: -0.32s; }
  span:nth-child(2) { animation-delay: -0.16s; }
  span:nth-child(3) { animation-delay: 0s; }
  span:nth-child(4) { animation-delay: 0.16s; }
}
@keyframes loadingBounce {
  0%, 80%, 100% { transform: scale(0); opacity: .4; }
  40% { transform: scale(1); opacity: 1; }
}

Animation logic

// main.js — preloader removal is a hard timeout, no readyState check:
setTimeout(function () {
  $(".preloader").remove();
}, 2000);

Notable details

• A flat setTimeout(2000) is used instead of $(window).on('load', …) — the loader always shows for at least 2 seconds even on a fast cache hit.
• Four dots with staggered delays (-0.32s … +0.16s) create a wave rather than a single pulse — feels more premium than a single spinner.

Use when

• Templates that intentionally want a fixed-duration "brand moment" before the page reveals.
• Static HTML sites where you don't want to wire up real load events but still want a perceived-load mask.

Caveats

• Hidden after JS runs — the screenshot pipeline will likely capture a palette-gradient placeholder unless the wait time is tuned. The template-level screenshot_wait_ms is set to 2500 ms so the preloader is gone by the time the screenshot fires.
• Hard-coded 2 s delay penalises fast connections; consider switching to a real load handler in production.