Spinner
draft
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.
Loading
Code
HTML
import { NbhdSpinner } from '@fbin-web/neighborhood-core';<nbhd-spinner></nbhd-spinner>React
import { NbhdSpinner } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdSpinner></NbhdSpinner>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
size
|
size
|
small | medium | large | xlarge
|
medium
|
This property sets the size of the spinner. |
speed
|
speed
|
slow | normal | fast
|
normal
|
This property sets the speed of the spinner animation. |
label
|
label
|
string
|
This property sets the accessible label for the spinner. |
Slots
| Name | Description |
|---|---|
| default | Content area. |
| visual | Visual area for spinner. |
CSS Parts
| Name | Description |
|---|---|
| base | The component's base wrapper. |
| 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. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-spinner-color
|
var(--nbhd-brand-primary, #201d1d) |
--nbhd-spinner-size-small
|
var(--nbhd-space-8, 32px) |
--nbhd-spinner-size-medium
|
var(--nbhd-space-12, 48px) |
--nbhd-spinner-size-large
|
var(--nbhd-space-20, 80px) |
--nbhd-spinner-size-xlarge
|
var(--nbhd-space-30, 120px) |
--nbhd-spinner-speed-slow
|
1.5s |
--nbhd-spinner-speed-normal
|
1s |
--nbhd-spinner-speed-fast
|
0.5s |
--nbhd-spinner-segment-color
|
var(--nbhd-spinner-color) |
--nbhd-spinner-size
|
var(--nbhd-spinner-size-medium) |
--nbhd-spinner-speed
|
var(--nbhd-speed-normal, 1s) |
--nbhd-spinner-track-color
|
oklch(from var(--nbhd-spinner-color) calc(l + 0.30) c h) |
--nbhd-spinner-track-width
|
calc(var(--nbhd-spinner-size) / 8) |