Vanilla Breeze

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.

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.

Color Variants

Inline Usage

Use a small spinner inline with text or inside buttons.

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.

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

  • <progress> — Native progress bar with circular ring mode
↑