36Preloader

The brand mark loading — for app boot, route changes and video stings. Five styles, all hairline-and-opacity; under reduced motion every one collapses to the static logo. A page-level wait shows the mark, never a generic spinner.

Use it for

App boot and route transitions
Video intro stings — flip is drawn for exactly that
Anywhere the wait is the whole screen, not one control

Not for

Inline busy state on a control — Spinner
Content that is arriving in a known shape — Skeleton

Pulse

The default. The logo breathing — calmest, for app boot.

markup

<div class="ns-preloader ns-preloader--pulse" role="status">
  <span class="ns-preloader__mark"><img class="ns-preloader__logo" src="../assets/logo/favicon.svg" alt=""></span>
  <span class="ns-preloader__label">Loading</span>
</div>

Ring

A brand arc circles the mark; the logo holds still.

markup

<div class="ns-preloader ns-preloader--ring" role="status">
  <span class="ns-preloader__mark"><img class="ns-preloader__logo" src="../assets/logo/favicon.svg" alt=""></span>
  <span class="ns-preloader__label">Loading</span>
</div>

Orbit

One dot orbiting — the quietest of the five.

markup

<div class="ns-preloader ns-preloader--orbit" role="status">
  <span class="ns-preloader__mark"><img class="ns-preloader__logo" src="../assets/logo/favicon.svg" alt=""></span>
  <span class="ns-preloader__label">Loading</span>
</div>

Flip

The video sting: one clean turn, then a beat of rest.

Namaste Salesforce

markup

<div class="ns-preloader ns-preloader--flip" role="status">
  <span class="ns-preloader__mark"><img class="ns-preloader__logo" src="../assets/logo/favicon.svg" alt=""></span>
  <span class="ns-preloader__label">Namaste Salesforce</span>
</div>

Bar

Logo over an indeterminate hairline — reads as measurable progress coming.

markup

<div class="ns-preloader" role="status">
  <span class="ns-preloader__mark"><img class="ns-preloader__logo" src="../assets/logo/favicon.svg" alt=""></span>
  <span class="ns-preloader__bar" aria-hidden="true"></span>
  <span class="ns-preloader__label">Loading</span>
</div>

Accessibility contract

role="status" on the wrapper announces the wait once
The label is real text, not only animation — the wait is legible with motion off