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
LoadingSpinnerin context of where new content will appear to help draw attention. - Leverage the NerdWallet
Button'sloadingprop to display aLoadingSpinnerwithin aButton.
Variants
Default
Color
Size
Props
<LoadingSpinner>
className
Deprecated
string
color
"green" | "green-light"
The color scheme of the spinner.
inline
boolean
Whether the spinner will render as a block-level or inline element.
loadingMessage
string
Loading message to be read to the screen reader.
role
"progressbar" | "status"
Role of the spinner in the context it is used.
size
number
Size of the spinner in pixels.
strokeWidth
number
Width of the circular path in pixels. If not explicitly provided, this value will be automatically computed based on the spinner size.
ref
(instance: any) => void | RefObject<any>