Spinner

A spinning animation that indicates loading.

This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.

Basic Usage

Show editable code example

Any Paragon component or export may be added to the code example.

<>
  <Spinner animation="border" className="mie-3" screenReaderText="loading" />
  <Spinner animation="grow" className="mie-3" screenReaderText="loading" />
</>

<>
  <Spinner animation="border" className="mie-3" screenReaderText="loading" />
  <Spinner animation="grow" className="mie-3" screenReaderText="loading" />
</>

Color Variants

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const variants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
  return variants.map((variant) => (
    <Spinner animation="border" variant={variant} className="mr-3" screenReaderText="loading" />
  ));
}

() => {
  const variants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
  return variants.map((variant) => (
    <Spinner animation="border" variant={variant} className="mr-3" screenReaderText="loading" />
  ));
}

Theme Variables (SCSS)#

$spinner-width:          2rem !default;
$spinner-height:         $spinner-width !default;
$spinner-border-width:   .25em !default;
$spinner-width-sm:         1rem !default;
$spinner-height-sm:        $spinner-width-sm !default;
$spinner-border-width-sm:  .2em !default;

Spinner Props API

className string
Specifies the class name for the component.
screenReaderText node
Specifies the screen reader content for a11y.

Paragon Design System

Theme

PlaygroundBeta

Spinner

Basic Usage

Color Variants

Theme Variables (SCSS)#

All components (A-Z)

Theme

PlaygroundBeta

Spinner

Basic Usage#

Color Variants#

Theme Variables (SCSS)#

All components (A-Z)

Basic Usage

Color Variants