Spinner
An animated loading indicator.
Spinner provides a variety of animated loading indicators to signal background processes. It comes with several unique animation types including standard dots, bouncing balls, and even rotating planets.
Usage
import { Spinner } from 'caret-tui';
const App = () => (
<Spinner
type="earth"
variant="primary"
label="Connecting to server..."
/>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | SpinnerType | 'dots' | The animation style of the spinner. |
variant | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'default' | 'default' | The color variant of the spinner graphic. |
label | string | - | Optional text displayed next to the spinner. |
SpinnerType Options
'dots'(⠋⠙⠹⠸⠼)'arc'(◜◠◝◞◡◟)'line'(- \ | /)'moon'(🌑🌒🌓🌔🌕)'earth'(🌍🌎🌏)'grow'(▃▄▅▆▇)'bounce'(⠁⠂⠄)'arrow'(←↖↑↗)'triangle'(◢◣◤◥)