Loading

A decorative rotating glyph and optional inline shell. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• loading-shell, loading

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<div role="status">
  <span class="loading-shell">
    <svg class="loading" viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="38 20"></circle>
    </svg>
  </span>
  Loading projects…
</div>

Variants and composition

loading can be applied to an SVG or a wrapper containing a glyph. loading-shell aligns it inline; the consumer supplies the visible shape and color.

Behavior and accessibility

The rotating glyph is decorative; place a persistent textual status outside it. Reduced-motion preference disables the spin.

Reference

See the interactive Storybook specimen ↗. Continue to Menu or return to the Official preset overview.