Spinners

Usage

Definition

Spinners are a visual element used by `Interstitials` to indicate a pending state. Typically this is used when first rendering a component which relies on fetching data from an outside source.

Common Characteristcs

A spinner is a visual element used to indicate a pending state. Typically this is used when first rendering a component which relies on fetching data from an external source.

Usage Guidelines

• Spinner should be used when an interface is not immediately available.
• Spinners provide a visual indication that something is happening.
• Typically, a Spinner will be displayed until data becomes available or when an error is encountered.
• The Interstitial component provides a best-practice implementation of this pattern and is recommended when using the Prism library in you app.

Before using Spinner

We recommend using Interstitial for a consistent implementation when orchestrating loading/suspense states. The Spinner component is offered only as an escape hatch where an interstitial won't suffice.

Code

Default Spinner

Live Editor

<div className="p-3 bg-white text-center"> <Spinner /> </div>

<div className="p-3 bg-white text-center">
  <Spinner />
</div>

Result

Loading...

Spinner Color

Set the color of a spinner - accepts Bootstrap utility classes or CSS Hex colors as a string. This does not support named CSS colors or rgb(a) values.

Live Editor

<div className="bg-white text-center"> <div className="row p-3"> <div className="col-3"> <h5>primary</h5> <Spinner color="primary" /> </div> <div className="col-3"> <h5>secondary</h5> <Spinner color="secondary" /> </div> <div className="col-3"> <h5>success</h5> <Spinner color="success" /> </div> <div className="col-3"> <h5>danger</h5> <Spinner color="danger" /> </div> </div> <div className="row p-3"> <div className="col-3"> <h5>info</h5> <Spinner color="info" /> </div> <div className="col-3"> <h5>warning</h5> <Spinner color="warning" /> </div> <div className="col-3"> <h5>#ff0000</h5> <Spinner color="#ff0000" /> </div> <div className="col-3"> <h5>#00ff00</h5> <Spinner color="#00ff00" /> </div> </div> </div>

<div className="bg-white text-center">
  <div className="row p-3">
    <div className="col-3">
      <h5>primary</h5>
      <Spinner color="primary" />
    </div>
    <div className="col-3">
      <h5>secondary</h5>
      <Spinner color="secondary" />
    </div>
    <div className="col-3">
      <h5>success</h5>
      <Spinner color="success" />
    </div>
    <div className="col-3">
      <h5>danger</h5>
      <Spinner color="danger" />
    </div>
  </div>
  <div className="row p-3">
    <div className="col-3">
      <h5>info</h5>
      <Spinner color="info" />
    </div>
    <div className="col-3">
      <h5>warning</h5>
      <Spinner color="warning" />
    </div>
    <div className="col-3">
      <h5>#ff0000</h5>
      <Spinner color="#ff0000" />
    </div>
    <div className="col-3">
      <h5>#00ff00</h5>
      <Spinner color="#00ff00" />
    </div>
  </div>
</div>

Result

Loading...

Color Options

We recommend using Bootstrap utility classes for consistent colors before resorting to CSS Hex colors. The default theme for Prism includes the following color mappings:

Bootstrap Color Name	Hex
primary	#ffc20e
secondary	#005ba8
success	#0d8240
danger	#c33a00
info	#2c90cc
warning	#eb9114

Spinner Sizes

You can adjust the dimensions of a spinner using the size prop. It accepts any valid CSS Dimension but we recommend using Bootstrap utility names where possible (sm, lg, xl etc.).

Live Editor

<> <div className="row p-3 bg-white text-center"> <div className="col-3"> <h5>xs - 15px</h5> <Spinner size="xs" /> </div> <div className="col-3"> <h5>sm - 19px</h5> <Spinner size="sm" /> </div> <div className="col-3"> <h5>md - 25px</h5> <Spinner size="md" /> </div> <div className="col-3"> <h5>lg - 33px</h5> <Spinner size="lg" /> </div> </div> <div className="row p-3 bg-white text-center"> <div className="col-3"> <h5>xl - 47px</h5> <Spinner size="xl" /> </div> <div className="col-3"> <h5>xxl - 47px</h5> <Spinner size="xxl" /> </div> <div className="col-3"> <h5>Custom Size (string)</h5> <Spinner size="73px" /> </div> <div className="col-3"> <h5>Custom Size (number)</h5> <Spinner size={97} /> </div> </div> </>

<>
  <div className="row p-3 bg-white text-center">
    <div className="col-3">
      <h5>xs - 15px</h5>
      <Spinner size="xs" />
    </div>
    <div className="col-3">
      <h5>sm - 19px</h5>
      <Spinner size="sm" />
    </div>
    <div className="col-3">
      <h5>md - 25px</h5>
      <Spinner size="md" />
    </div>
    <div className="col-3">
      <h5>lg - 33px</h5>
      <Spinner size="lg" />
    </div>
  </div>
  <div className="row p-3 bg-white text-center">
    <div className="col-3">
      <h5>xl - 47px</h5>
      <Spinner size="xl" />
    </div>
    <div className="col-3">
      <h5>xxl - 47px</h5>
      <Spinner size="xxl" />
    </div>
    <div className="col-3">
      <h5>Custom Size (string)</h5>
      <Spinner size="73px" />
    </div>
    <div className="col-3">
      <h5>Custom Size (number)</h5>
      <Spinner size={97} />
    </div>
  </div>
</>

Result

Loading...

Size Options

Note: In order to consistently center the spinner, numerical size arguments must be an odd number. Even values will be rendered 1px smaller than indicated in order to calculate the center correctly.

Size	Rendered Height
xs	15px
sm	19px
md	25px
lg	33px
xl	47px
xxl	47px
"74px"	73px
20	19px

Spinner Props

Name	Type	Default	Description
size	string,number (odd only)	md	Size of spinner*
color	string	#000000	Fill color of spinner