Spinner
Widget that displays a loading state. It is used to indicate that an action is in progress.
Import
import { Spinner } from '@vortex-kit/vortex';
import type { SpinnerProps } from '@vortex-kit/vortex';Display
<Spinner ariaLabel='Loading...' />Features
Supports responsive sizes
Accepts custom className and attributes
Accessible with aria-label and aria-live
Has a role of progressbar to indicate its purpose in loading states.
Size
Spinner comes in three sizes: sm, md, and lg. The default size is sm.
Loading...
Show Code
Responsive Sizes
Spinner supports responsive sizing using breakpoint objects. This allows different sizes at different screen sizes.
Loading...
Show Code
Color
Spinner accepts a color property, which can be set to either default or inherit. The default value is default.
Loading...
Show Code
Accessibility
Spinner component includes necessary ARIA attributes to enhance accessibility for users.
Key | Description |
|---|---|
⬢ | Use ariaLabel prop to describe the spinner for screen readers. |
⬢ | Spinner also has aria-live along with aria-label to announce the loading state to screen readers. |
⬢ | Spinner has a role of progressbar to indicate its purpose in loading states. |