preloader

Summary

Branded preloader that types out the wordmark "potu" letter by letter, with each character animating independently. The whole overlay fades out 1 second after the window load event.

HTML structure (minimal)

<div class="loader-wrap">
  <div class="preloader">
    <div id="handle-preloader" class="handle-preloader">
      <div class="animation-preloader">
        <div class="spinner"></div>
        <div class="txt-loading">
          <span data-text-preloader="p" class="letters-loading">p</span>
          <span data-text-preloader="o" class="letters-loading">o</span>
          <span data-text-preloader="t" class="letters-loading">t</span>
          <span data-text-preloader="u" class="letters-loading">u</span>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.loader-wrap { position: fixed; inset: 0; z-index: 99999; background: #fff; }
.txt-loading .letters-loading {
  position: relative; display: inline-block;
  font-size: 100px; font-weight: 700;
  color: rgba(0,0,0,0.10);
}
.txt-loading .letters-loading::before {
  content: attr(data-text-preloader);
  position: absolute; left: 0; top: 0;
  color: var(--theme-color);
  animation: letters-loading 4s infinite;
}

Animation logic

function handlePreloader() {
  if ($('.loader-wrap').length) {
    $('.loader-wrap').delay(1000).fadeOut(500);
  }
}
$(window).on('load', handlePreloader);

Notable details

• The data-text-preloader attribute is rendered via content: attr(...) so each letter can recolour independently without duplicate markup.
• The keyframes that drive each letter live in assets/css/elpath.css — copy that file alongside the markup.
• Fade-out is delayed 1000 ms past window load so the type-on choreography always plays at least once.

Use when

• Brand-led portfolio launches where the wordmark is the hero.
• Sites with heavy first paint where you want to mask the asset load with something on-brand.

Caveats

• The preloader is hidden on the live page after ~1.5 s — screenshot at 1440×900 lands after fadeOut, so the screenshot pipeline will fall back to a palette placeholder for this component.
• jQuery dependency; rewriting in vanilla JS is a 5-line job if jQuery is dropped.