Spinner

Circular progress indicator for determinate and indeterminate loading states.

Introduction

Spinner is a circular indicator for ongoing work. Use the indeterminate mode when duration is unknown, or determinate with a value from 0 to 100 when progress is known.

When to use: Inline loaders in buttons, cards, empty states, or any compact area where a linear bar would be too wide.

Compared to similar components:

• Progress — Linear bar for full-width or horizontal tracks, including buffer and query variants. Prefer Spinner in tight layouts.
• Skeleton — Placeholder shapes that preserve layout. Use Skeleton when content structure is known; use Spinner when the focus is “something is loading” rather than layout preview.

Always pass aria-label or aria-labelledby so assistive technology has an accessible name.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Spinner } from "@bridge-ui/vue/Components/Spinner";

import { Spinner } from "@bridge-ui/react/Components/Spinner";

Basic usage

By default, Spinner renders an indeterminate arc.

Determinate

Set variant="determinate" and pass value from 0 to 100 when progress is known.

Track

Enable enableTrack to draw a subtle track circle behind the progress arc.

Disable shrink

Set disableShrink to turn off the indeterminate circle shrink animation for a steady rotating arc.

Colors

Use the color prop to convey semantic meaning. Available colors: primary, secondary, success, info, warning, error, dark, and black.

Sizes

Control diameter with size. Available values: xs, sm, md (default), and lg.

Customization

Fine-tune appearance with className (React) or class (Vue), and the classes prop to target root, svg, circle, and track. Stroke thickness is controlled with thickness (default 3.6).

Accessibility

• Provide an accessible name with aria-label or aria-labelledby.
• For determinate mode, keep value in sync with real progress so assistive technology can announce it.
• Prefer reducing motion-sensitive experiences when prefers-reduced-motion is set by the user—animation alone is not a reliable status signal.

Anatomy

Spinner renders a root <span> wrapping an SVG with an optional track circle and the progress circle:

<span class="spinner-root" role="progressbar">
  <svg class="spinner-svg">
    <!-- enableTrack only -->
    <circle class="spinner-track"></circle>
    <circle class="spinner-circle"></circle>
  </svg>
</span>

Related components

Progress, Skeleton

API