Spinner
Displays an animated indicator showing users that content or actions are loading. Use to communicate ongoing processes, such as fetching data from a server. For loading states on buttons, use the “loading” property on the Button component instead.
Anchor to propertiesProperties
- Anchor to accessibilityLabelaccessibilityLabelstring
A label that describes the purpose of the progress. When set, it will be announced to users using assistive technologies and will provide them with more context. Providing an
is recommended if there is no accompanying text describing that something is loading.- string
A unique identifier for the element.
- Anchor to sizesize'small' | 'large' | 'base' | 'small-100' | 'large-100'
Adjusts the size of the spinner icon.
SpinnerProps
- accessibilityLabel
A label that describes the purpose of the progress. When set, it will be announced to users using assistive technologies and will provide them with more context. Providing an `accessibilityLabel` is recommended if there is no accompanying text describing that something is loading.
string - id
A unique identifier for the element.
string - size
Adjusts the size of the spinner icon.
'small' | 'large' | 'base' | 'small-100' | 'large-100'
export interface SpinnerProps extends SpinnerProps$1 {
size?: Extract<SpinnerProps$1['size'], 'small-100' | 'small' | 'base' | 'large' | 'large-100'>;
}Code
examples
Code
<s-spinner />
Preview
