LoadingSpinner

Status: Stable

Latest released: February 2020

Current version: v7.2.0

Storybook
GitHub

The standard NerdWallet loading spinner lets users know that a process is underway. This iteration of the component is circular and visualizes an unspecified wait time – spinning persists until the process is complete.

Best practices

  • Center on a screen to indicate the initial loading of an entire screen.
  • Place LoadingSpinner in context of where new content will appear to help draw attention.
  • Leverage the NerdWallet Button's loading prop to display a LoadingSpinner within a Button.

Variants

Default

Color

Size

Development

import LoadingSpinner from '@nerdwallet/react-loading-spinner';
<LoadingSpinner />;

Props

<LoadingSpinner>

color

"green" | "green-light"

The color scheme of the spinner.

Default

'green'

inline

boolean

Whether the spinner will render as a block-level or inline element.

Default

false

size

number

Size of the spinner in pixels.

Default

24

strokeWidth

number

Width of the circular path in pixels. If not explicitly provided, this value will be automatically computed based on the spinner size.

Default

null