Spinner

Ready

Spinner is used to indicate that a process is ongoing, such as loading data or performing an action. It provides visual feedback to users that something is happening in the background.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdSpinner } from '@fbin-web/neighborhood-core';

Usage

<nbhd-spinner></nbhd-spinner>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdSpinner } from '@fbin-web/neighborhood-react';

Usage

import { NbhdSpinner } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdSpinner></NbhdSpinner>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`size`	`size`	`smallmediumlargexlarge`	`medium`	This property sets the size of the spinner.
`speed`	`speed`	`slownormalfast`	`normal`	This property sets the speed of the spinner animation.
`label`	`label`	`string`	—	Text announced to screen readers while loading (visually hidden), followed by the text of any visible content. Defaults to "Loading" when there is neither.

Slots

Name	Description
`(default)`	Content area for short text. Screen readers hear its text through the status region, so it shouldn't contain links or buttons.
`visual`	Visual area for spinner.

CSS Parts

Name	Description
`base`	The component's base wrapper.
`label`	The visually hidden text announced by the status region: the label and the content's text.
`indicator`	The spinner's visual indicator.
`visual`	The spinner's visual representation.
`content-container`	The container for the spinner's content.
`content`	The content area of the spinner.

nbhd-spinner::part(base) {
  /* your styles */
}

CSS Properties

Set these on nbhd-spinner or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.

Property	Token	Value
`--nbhd-spinner-borderRadius`	`--nbhd-border-radius-full`	`9999px`
`--nbhd-spinner-maxInlineSize`	—	`500px`
`--nbhd-spinner-paddingBlockStart`	`--nbhd-space-1`	`4px`
`--nbhd-spinner-segment-zIndex`	`--nbhd-z-1`	`1`
`--nbhd-spinner-size-lg`	—	`80px`
`--nbhd-spinner-size-md`	—	`48px`
`--nbhd-spinner-size-sm`	—	`32px`
`--nbhd-spinner-size-xl`	—	`120px`
`--nbhd-spinner-speed-fast`	—	`500ms`
`--nbhd-spinner-speed-normal`	—	`1s`
`--nbhd-spinner-speed-slow`	—	`1.5s`
`--nbhd-spinner-track-opacity`	`--nbhd-opacity-track`	`0.35`