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;

Props API#

Spinner Props API

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

Usage Insights#

Spinner

Project Name	Paragon Version	Instance Count
edx-ora2	20.9.2	1
frontend-app-account	20.44.0	4
frontend-app-admin-portal	20.39.2	7
frontend-app-authn	20.45.5	3
frontend-app-communications	20.45.0	1
frontend-app-course-authoring	20.35.1	2
frontend-app-discussions	20.44.0	11
frontend-app-learner-dashboard	20.32.0	2
frontend-app-learning	20.28.4	3
frontend-app-library-authoring	20.45.5	1
frontend-app-ora-grading	20.45.1	3
frontend-app-publisher	20.28.5	2
frontend-app-support-tools	20.45.0	1
frontend-component-header-edx	20.45.5	1
frontend-component-header	20.45.5	1
frontend-lib-content-components	20.45.0	12
frontend-lib-special-exams	20.29.0	2
prospectus	20.45.2	3

Leave feedback

Paragon Design System

Theme

Spinner

Basic Usage

Color Variants

Theme Variables (SCSS)#

Props API#

Usage Insights#

Spinner

All components (A-Z)

Theme

Spinner

Basic Usage#

Color Variants#

Theme Variables (SCSS)#

Props API#

Usage Insights#

Spinner

All components (A-Z)

Basic Usage

Color Variants