averouiComponent playgroundv0.0.1
Components / Misc /ProgressSpinner

ProgressSpinner

New

A circular loading indicator for work with an unknown duration. Keep the interface clear while your application prepares the next step.

SVG animationCustom appearanceReduced motion

Basic

An infinite rotation indicates that work is in progress.

Custom

Adjust stroke width, fill, color and rotation duration to fit your interface.

Loading state

Show the spinner only while a task runs. This example finishes after 2.5 seconds.

Start loading to preview the indicator.

Usage and API

import { AvProgressSpinner } from 'avero-ui';

<av-progress-spinner ariaLabel="Loading" />
<av-progress-spinner strokeWidth="8" fill="transparent"
  animationDuration=".5s" style="width: 50px; height: 50px"
  aria-label="Loading results" />
<av-progress-spinner aria-labelledby="loading-label"
  style="--av-progress-spinner-color: #5b4cb7" />
<span id="loading-label">Preparing your workspace</span>

Import AvProgressSpinner. Inputs are strokeWidth (default 2, clamped to 1–10), fill (default transparent), animationDuration (default 2s) and ariaLabel. Numeric stroke widths can be supplied as numbers or strings. Invalid widths use 2; invalid or non-positive durations use 2s. Durations accept seconds or milliseconds.

Set width and height with CSS, or use --av-progress-spinner-size (default 100px) and --av-progress-spinner-color. Animation stops when the user prefers reduced motion, leaving a visible static indicator.

The component exposes the progressbar role without a numeric value. Provide ariaLabel, aria-label or aria-labelledby to describe the operation. It has no keyboard interaction. Set aria-busy on the region being loaded and announce completion separately when needed.

Reference: PrimeNG ProgressSpinner.