preloader

Summary

A full-screen splash that combines a brass spinner ring, a per-letter LAWGIST text reveal that flips each glyph in around the Y axis with a staggered delay, and a four-column white "curtain" that wipes off-screen on window.load.

HTML structure (minimal)

<div id="preloader" class="preloader">
  <div class="animation-preloader">
    <div class="spinner"></div>
    <div class="txt-loading">
      <span data-text-preloader="L" class="letters-loading">L</span>
      <span data-text-preloader="A" class="letters-loading">A</span>
      <span data-text-preloader="W" class="letters-loading">W</span>
      <span data-text-preloader="G" class="letters-loading">G</span>
      <span data-text-preloader="I" class="letters-loading">I</span>
      <span data-text-preloader="S" class="letters-loading">S</span>
      <span data-text-preloader="T" class="letters-loading">T</span>
    </div>
    <p>Loading</p>
  </div>
  <div class="loader">
    <div class="row">
      <div class="col-3 loader-section section-left"><div class="bg"></div></div>
      <div class="col-3 loader-section section-left"><div class="bg"></div></div>
      <div class="col-3 loader-section section-right"><div class="bg"></div></div>
      <div class="col-3 loader-section section-right"><div class="bg"></div></div>
    </div>
  </div>
</div>

Key SCSS tokens

.preloader {
  position: fixed; inset: 0; z-index: 9999999;
  display: flex; align-items: center; justify-content: center;

  .spinner {
    width: 9em; height: 9em;
    border: 3px solid rgba(0,0,0,0.2);
    border-top-color: #b69d74;
    border-radius: 50%;
    animation: spinner 1s infinite linear;
  }

  .letters-loading::before {
    content: attr(data-text-preloader);
    position: absolute; top: -3px; left: 0;
    color: #97cbdc;
    transform: rotateY(-90deg);
    opacity: 0;
    animation: letters-loading 4s infinite;
  }
  .letters-loading:nth-child(2)::before { animation-delay: 0.2s; }
  .letters-loading:nth-child(3)::before { animation-delay: 0.4s; }
  /* ... up to nth-child(8) at 1.4s */

  .loader-section .bg {
    background: #fff; height: 100%; width: 100%;
    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  &.loaded .loader-section .bg { width: 0; }
  &.loaded .animation-preloader { opacity: 0; transition: 0.3s ease-out; }
}

Animation logic

function loader() {
  $(window).on('load', function() {
    $('.preloader').addClass('loaded');
    $('.preloader').delay(600).fadeOut();
  });
}
loader();

Notable details

• Letter flip is pure CSS — data-text-preloader repeats each glyph as a pseudo-element animated with rotateY(-90deg) and per-nth-child delays. No JS keyframe library needed.
• Four "curtain" columns split into section-left/section-right so the wipe collapses outward from the centre, hinting at scales-of-justice symmetry.
• Spinner ring uses the brass $primary-3 (#b69d74) accent, anchoring the splash to the rest of the palette.

Use when

• Building a splash that wants to feel typographic and editorial.
• Brand wordmark is short (≤ 8 letters) and renders well in a serif display face.
• You want a CSS-only animation that doesn't pull in GSAP or Lottie.

Caveats

• .preloader is position: fixed; z-index: 9999999 and overlays the page — if your screenshot pipeline captures before loaded is added, only the splash will be visible. The screenshot_wait_ms: 2500 setting accounts for loader().fadeOut() after window.load plus the 600ms delay.
• Selector targets the splash itself; once hidden by fadeOut() it has zero height. The pipeline may still capture it during the brief visible window.