Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

Spinner

A spinning animation that indicates loading.

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

Basic Usage

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" />

</>

Color Variants

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" />

  ));

}

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 NameParagon VersionInstance Count
edx-ora220.9.21
frontend-app-account20.36.02
frontend-app-admin-portal20.26.37
frontend-app-authn20.36.23
frontend-app-communications20.30.11
frontend-app-course-authoring20.32.02
frontend-app-discussions20.15.011
frontend-app-learner-dashboard20.32.02
frontend-app-learning20.28.43
frontend-app-library-authoring20.30.11
frontend-app-ora-grading20.30.03
frontend-app-profile20.32.01
frontend-app-publisher20.28.52
frontend-app-support-tools20.26.01
frontend-lib-content-components20.34.010
frontend-lib-special-exams20.22.42
Leave feedback

Contents

All components (A-Z)