Spinner

Portable loading indicator primitive with accessible status, decorative mode, size presets, token styling, and composition examples.

Preview

Usage

import { FrSpinnerModule } from '@frame-ui-ng/components/spinner';

HTML

<span frSpinner label="Loading project data"></span>

Examples

Basic

Use a status spinner when the loading indicator is the only announcement for an in-progress region.

Sizes

Use size presets for common inline, control, and empty-state loading treatments. `sizeValue` can still override the exact CSS size.

Inside Button

Place Spinner in the button loading slot when you want the shared spinner token contract instead of a one-off indicator.

Inside Badge

Badge spinners compose the same primitive, so badge loading states inherit the shared spinner inputs and tokens.

SyncingQueued

Inside Input Group

Use a decorative spinner in trailing input-group content when a field is checking, searching, or validating in the background.

Inside Empty

Spinner can sit in the media slot of an empty state when content is still being prepared rather than truly missing.

RTL

The spinner itself is direction-neutral and composes naturally with right-to-left labels and surrounding layouts.

جار تحضير البيانات

Custom Styling

Override spinner tokens directly on the element or on a local wrapper when a loading state needs a stronger product-specific treatment.

Token Inspector

Hover the spinner or supporting label to inspect the tokens that control loading size, stroke, color, radius, and motion.

Loading previewHover the spinner to inspect size, stroke, colors, radius, and timing.

Design Tokens

Use these CSS custom properties to tune spinner dimensions, stroke width, track and indicator color, radius, and animation speed across every component that composes Spinner.

SCSS

--frame-spinner-size: 1rem;
--frame-spinner-stroke: 2px;
--frame-spinner-track-color: color-mix(in srgb, currentColor 24%, transparent);
--frame-spinner-indicator-color: currentColor;
--frame-spinner-radius: 999px;
--frame-spinner-duration: 700ms;

Icons