preloader-runok

Summary

Full-screen dark preloader with a centered "Runok" wordmark. Auto-fades out 1000 ms after window.load via jQuery; the same setTimeout doubles as the cue for hero SplitType characters to start animating, so the preloader fade and hero typography reveal feel like a single transition.

HTML structure (minimal)

<div id="preloader">
  <div class="loading" data-loading-text="Runok"></div>
</div>

Key SCSS tokens

#preloader {
  position: fixed; inset: 0;
  background: var(--rr-color-bg-1);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  .loading {
    color: var(--rr-color-common-white);
    font-family: var(--rr-ff-heading);
    font-size: 80px; font-weight: 700;
    text-transform: uppercase;
    &::before {
      content: attr(data-loading-text);
      animation: pulse 1s ease-in-out infinite alternate;
    }
  }
}
@keyframes pulse {
  from { opacity: .3; }
  to   { opacity: 1; }
}

Animation logic

$(window).on("load", function () {
  $("#preloader").delay(1000).fadeOut(500);

  // Hero text reveal starts as the preloader fades — same setTimeout window
  setTimeout(() => {
    $(".anim-text").each(function () {
      const $this = $(this);
      new SplitType($this, { types: "lines, chars", className: "char" });
      gsap.fromTo(
        $this.find(".char"),
        { y: "100%" },
        { y: "0%", duration: 0.9, stagger: 0.03, ease: "power2.out" }
      );
    });
  }, 1000);
});

// Manual close button (used on demo pages)
$(".preloader-close").on("click", function () {
  $("#preloader").delay(0).fadeOut(500);
});

Caveats

• The preloader is initially hidden in screenshots taken AFTER networkidle + 1500 ms; for accurate component captures the screenshot pipeline relies on the placeholder fallback (palette gradient).
• The fadeOut(500) runs even on cached page loads with no genuine load delay, adding 1.5 s of artificial wait — fine for a marketing site, but on app-style templates consider a faster fadeOut once document.readyState === "complete".
• pulse keyframe animates indefinitely until fadeOut starts; if the fade is delayed (e.g. a slow image), the text continues pulsing — could be jarring.

Notable details

• Pairing the preloader fade and the hero SplitType reveal under one setTimeout(…, 1000) makes the transition feel choreographed rather than two separate events.
• The wordmark is drawn from the data-loading-text attribute via ::before { content: attr(data-loading-text) } — easy to brand by editing the attribute, no SCSS edit required.

Use when

• Marketing/agency landing pages where a brief preloader buys time for hero photos to decode and prevents a flash of unstyled SplitType characters.
• Templates that want a brand-name preloader rather than a generic spinner.