Spinner<mds-spinner>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
runningrunningbooleanSpecifies if the animation is running or not, it's required for performance reasons
Overview
The <mds-spinner> web component is the Magma Design System’s loading/await indicator: a self-contained, animated SVG spinner used standalone or embedded inside host components (mds-button, mds-input, mds-entity) to signal an in-progress, indeterminate operation. It has no HTML primitive equivalent and exposes no text content.
Semantic Behavior
Visibility is gated by running: When running is absent/false the spinner is hidden and its animation is paused; setting running reveals it and starts the animation. The animation never runs while hidden, for performance.No interactivity or accessibility role: It is decorative - not focusable, emits no events, has no ARIA role, and is not form-associated. Any loading semantics (e.g. aria-busy) must be set by the surrounding context.Reduced-motion and contrast aware: The animation slows down (8s per turn, it never stops) under the OS prefers-reduced-motion setting, and the color is strengthened under the contrast preference, without consumer intervention.
Properties & Visual Configurations
The component exposes a single behavioral prop:running is the master switch that both shows the spinner and runs its animation; treat it as a boolean presence attribute and drive it from the consuming component’s loading/await state rather than toggling visibility manually.
Other behavioral props
--mds-spinner-duration (CSS custom property, default 0.725s) tunes the rotation speed of the spin animation; override it on the host to slow down or speed up the indicator without touching markup.