Skip to main content

Spinner

A visual indicator to provide feedback to the user that an action is in progress.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Spinner } from '@iag/chroma-react-ui.components';

Accessibility​

Accessibility documentation(opens in new window)

Default​

Inverse​

Custom aria value text​

Spinner page loader​

Properties​

Name
Description
  • className
    stringAdditional CSS classes to be applied
  • id
    stringHTML id attribute for the Input
  • style
    CSSPropertiesHTML style attribute for custom styling of the svg
  • width
    stringThe width of the spinner in pixels
  • variant
    "inverse" | "page"The variant of the spinner
  • aria-valuetext
    stringThe value of progress

CSS Variables​