preloader-dot-loader

Summary

Full-screen white preloader overlay with two pulsing dots in the center. Auto-hides after window.load via jQuery fadeOut. Marked as "still record a sensible selector" — the screenshot pipeline will fall back to the palette gradient because this element is removed from view soon after first paint.

HTML structure (minimal)

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

Key SCSS tokens

#preloader {
  position: fixed; inset: 0;
  background: var(--tp-common-white);
  z-index: 999999;
  display: flex; align-items: center; justify-content: center;
}
.preloader {
  display: inline-flex; gap: 12px;
}
.preloader span {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--tp-theme-1);
  animation: preloaderPulse 1s ease-in-out infinite alternate;
}
.preloader span:nth-child(2) {
  animation-delay: .3s;
  background: var(--tp-common-orange);
}
@keyframes preloaderPulse {
  from { transform: scale(.6); opacity: .4; }
  to   { transform: scale(1.2); opacity: 1;  }
}

Animation logic

// In main.js — runs after window load
$(window).on('load', function () {
  $('#preloader').delay(200).fadeOut(450);
});

Notable details

• Two-color pulsing dots establish the brand palette (theme-1 + orange) before the page even paints.
• position: fixed; inset: 0 means it covers the entire viewport regardless of scroll position.
• After fadeOut the element is left in DOM with display: none — handy for re-triggering on SPA route changes if you migrate to a framework.

Use when

• Image- or font-heavy pages that benefit from hiding layout shift.
• Brand intros where the preloader doubles as a tiny logo moment.
• Templates where you want to gate scroll/animation start until images finish.

Caveats

• The screenshot pipeline cannot capture this once the page is interactive — the component card will fall back to a palette-gradient placeholder.
• jQuery dependency — port to vanilla document.readyState === 'complete' if you drop jQuery.