Spinner

The spinner is used as an indicator to show the user that content or data is loading.

AnatomyPermalink to: Anatomy

1. Loading indicator: An animated spinner that signals to the user that something is happening in the background.

UsagePermalink to: Usage

Use a Spinner to indicate a loading state, such as a page loading content.

AccessibilityPermalink to: Accessibility

Using a Spinner requires a bit of extra effort in order for users of assistive technologies to be informed of loading status.

The container which contains the Spinner (and eventually the content that is loading) needs at least two additional attributes:

1. aria-live="polite" — this will ensure that the user is notified when the Spinner is swapped with actual content. Be sure to test this with a screen reader, as it might also require the use of aria-atomic="true" for the live notification to include nested elements.
2. aria-busy — this should be set to true while the Spinner is displayed and toggled to false once the Spinner is replaced with the content.

For further info, please read More accessible skeletons by Adrian Roselli(external link).

ExamplesPermalink to: Examples

SizesPermalink to: Sizes

There are four available sizes for the Spinner: 16px (default), 24px, 32px and 48px.

import { Spinner } from "@peakon/bedrock/react/spinner";

<Spinner />
<Spinner size="24" />
<Spinner size="32" />
<Spinner size="48" />

ColorsPermalink to: Colors

The spinner will inherit the current color (currentColor) set on the containing element.

import { Spinner } from "@peakon/bedrock/react/spinner";

<div style={{ color: "black" }}>
  <Spinner size="32" />
</div>
<div style={{ color: "blue" }}>
  <Spinner size="32" />
</div>
<div style={{ color: "red" }}>
  <Spinner size="32" />
</div>
<div style={{ color: "green" }}>
  <Spinner size="32" />
</div>
<div style={{ color: "purple" }}>
  <Spinner size="32" />
</div>
<div style={{ color: "lime" }}>
  <Spinner size="32" />
</div>

Props TablePermalink to: Props Table

Props extend from HTML Div Element(external link), with the omission of className and style