letter-preloader

Summary

Full-screen white preloader showing the wordmark "digmox" letter by letter. Each letter renders twice — a hollow stroked outline plus a solid ::before overlay — and the overlay flips on the Y axis with a 0.2s stagger before the whole thing fades out.

HTML structure (minimal)

<div class="loader-wrap">
  <div class="preloader">
    <div class="handle-preloader">
      <div class="animation-preloader">
        <div class="spinner"></div>
        <div class="txt-loading">
          <span data-text-preloader="d" class="letters-loading">d</span>
          <span data-text-preloader="i" class="letters-loading">i</span>
          <span data-text-preloader="g" class="letters-loading">g</span>
          <span data-text-preloader="m" class="letters-loading">m</span>
          <span data-text-preloader="o" class="letters-loading">o</span>
          <span data-text-preloader="x" class="letters-loading">x</span>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.handle-preloader .txt-loading .letters-loading {
  font-family: var(--title-font);
  font-size: 70px;
  letter-spacing: 15px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3);
  display: inline-block;
  position: relative;
}

.handle-preloader .txt-loading .letters-loading::before {
  content: attr(data-text-preloader);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  color: #000;
  animation: letters-loading 4s infinite;
}

.handle-preloader .txt-loading .letters-loading:nth-child(2)::before { animation-delay: 0.2s; }
.handle-preloader .txt-loading .letters-loading:nth-child(3)::before { animation-delay: 0.4s; }
/* ...continues per letter... */

@keyframes letters-loading {
  0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); }
  25%, 50%      { opacity: 1; transform: rotateY(0deg); }
}

Animation logic

// Hides the loader 1s after document load with a 500ms fade.
function handlePreloader() {
  if ($('.loader-wrap').length) {
    $('.loader-wrap').delay(1000).fadeOut(500);
  }
}
$(window).on('load', handlePreloader);

Notable details

• Each letter is an outlined stroke color: transparent; -webkit-text-stroke and the filled letter is the ::before — that is what makes the rotateY flip from outline to filled.
• The keyframe holds opacity: 0 from 75-100%, leaving a blank gap before the next loop, which is what gives the marquee feel.
• The wordmark uses data-text-preloader attributes so the same CSS works for any brand name without modifying selectors.

Use when

• Brand-led splash screens where the logotype itself should perform.
• Short brand names (4-8 letters) where a per-letter stagger reads cleanly.
• Static sites that don't need a real loading-progress indicator.

Caveats

• Hard-coded nth-child delay rules go up to the 10th letter, so longer wordmarks need extra rules.
• Uses -webkit-text-stroke which has full modern-browser support but no real fallback in old IE.
• The 1000ms delay before fade-out runs even on instant page loads, adding perceived load time.