loading-spinner

CSS-only loading spinner for indicating async operations. Supports sizes, colors, and inline usage.

Overview

The <loading-spinner> element displays a CSS-only animated spinner for loading states. It requires no JavaScript and works as a simple custom element with CSS styling.

<loading-spinner aria-label="Loading"></loading-spinner>

Attributes

Attribute Values Default Description
data-size xs, s, m, l, xl m Spinner size.
data-variant primary, success, warning, error inherit Color variant.
data-overlay boolean — Centers spinner over its parent with a translucent backdrop.
aria-label string — Required for screen readers (e.g., “Loading”).

Sizes

Five size presets from extra-small to extra-large. The spinner inherits currentColor by default.

<loading-spinner data-size="xs" aria-label="Loading"></loading-spinner> <loading-spinner data-size="s" aria-label="Loading"></loading-spinner> <loading-spinner data-size="m" aria-label="Loading"></loading-spinner> <loading-spinner data-size="l" aria-label="Loading"></loading-spinner> <loading-spinner data-size="xl" aria-label="Loading"></loading-spinner>

Color Variants

<loading-spinner data-variant="primary" aria-label="Loading"></loading-spinner> <loading-spinner data-variant="success" aria-label="Loading"></loading-spinner> <loading-spinner data-variant="warning" aria-label="Loading"></loading-spinner> <loading-spinner data-variant="error" aria-label="Loading"></loading-spinner>

Inline Usage

Use a small spinner inline with text or inside buttons.

Loading your data...

<p> <loading-spinner data-size="s" aria-label="Loading"></loading-spinner> Loading your data... </p> <button disabled> <loading-spinner data-size="s" aria-label="Loading"></loading-spinner> Processing... </button>

Custom Properties

Property Default Description
--spinner-size 1.5em Overall spinner dimensions.
--spinner-width 0.2em Border/track thickness.
--spinner-color currentColor Active arc color.
--spinner-track 20% of color Background track color.
--spinner-speed 0.7s Rotation duration.
loading-spinner { --spinner-size: 3em; --spinner-width: 0.3em; --spinner-color: oklch(55% 0.2 260); --spinner-speed: 1s; }

Accessibility

  • Always include aria-label="Loading" for screen reader announcement.
  • Animation slows to 1.5s under prefers-reduced-motion: reduce.
  • CSS-only: works without JavaScript.

Related Elements