NETFRAME_DOCS // SPINNER
GITHUB

Spinner

Signal-cell loading indicators: a stationary square frame with slow, alternating diagonal cells. No rotating borders or jagged moving edges. A full pulse takes 2.4 seconds; reduced-motion mode shows steady cells. Existing size and colour classes are unchanged.

Default

DEFAULT

<span class="nf-spinner" role="status" aria-label="Loading"></span>

Sizes

SM / DEFAULT / LG / XL

<span class="nf-spinner nf-spinner-sm" role="status" aria-label="Loading"></span>
<span class="nf-spinner" role="status" aria-label="Loading"></span>
<span class="nf-spinner nf-spinner-lg" role="status" aria-label="Loading"></span>
<span class="nf-spinner nf-spinner-xl" role="status" aria-label="Loading"></span>

Color variants

PRIMARY / SECONDARY / TERTIARY / ERROR

<span class="nf-spinner nf-spinner-lg" role="status" aria-label="Loading"></span>
<span class="nf-spinner nf-spinner-lg nf-spinner-secondary" role="status" aria-label="Loading"></span>
<span class="nf-spinner nf-spinner-lg nf-spinner-tertiary" role="status" aria-label="Loading"></span>
<span class="nf-spinner nf-spinner-lg nf-spinner-error" role="status" aria-label="Loading"></span>

Block spinner

Centered in its container with an optional steady label:

BLOCK

<div class="nf-spinner-block">
<span class="nf-spinner nf-spinner-lg" role="status" aria-label="Loading"></span>
<span class="nf-spinner-label">INITIALIZING...</span>
</div>

Class reference

Class Description
nf-spinner Base — 1.5rem signal-cell loader, primary colour
nf-spinner-sm 1rem
nf-spinner-lg 2.5rem
nf-spinner-xl 4rem
nf-spinner-secondary Secondary-colour cells
nf-spinner-tertiary Tertiary-colour cells
nf-spinner-error Error-colour cells
nf-spinner-block Centered flex column wrapper
nf-spinner-label Steady text label inside .nf-spinner-block

Tune --nf-spinner-speed (default 2.4s) if needed. Keep a meaningful loading label; do not use animation alone to communicate status.