React component for delightful loading messages
npm install @flibbertigibbeting/loading-messageReact components for delightful loading messages and 50+ customizable spinners from flibbertigibbeting.dev.
``bash`
npm install @flibbertigibbeting/loading-message
Displays delightful loading messages with optional spinner.
`tsx
import { LoadingMessage } from '@flibbertigibbeting/loading-message'
function App() {
return (
spinnerType="dots-bounce"
spinnerColor="#3b82f6"
/>
)
}
`
#### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| category | string | - | Filter messages by category |tone
| | string | - | Filter messages by tone |safe
| | boolean | true | Only show SFW messages |interval
| | number | 3000 | Time between message changes (ms) |showSpinner
| | boolean | true | Show animated spinner |spinnerType
| | SpinnerType | 'circle' | Spinner animation style |spinnerSize
| | number | 20 | Spinner size in pixels |spinnerColor
| | string | 'currentColor' | Spinner color |spinnerSpeed
| | number | 1 | Animation speed multiplier |className
| | string | - | Custom CSS classes |onMessageChange
| | (message) => void | - | Callback when message updates |
Standalone customizable spinner with 50+ animation styles.
`tsx
import { Spinner } from '@flibbertigibbeting/loading-message'
function App() {
return
}
`
#### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| type | SpinnerType | 'circle' | Spinner animation style |size
| | number | 40 | Size in pixels |color
| | string | 'currentColor' | Any valid CSS color |speed
| | number | 1 | Animation speed multiplier |className
| | string | - | Additional CSS class |style
| | CSSProperties | - | Inline style overrides |label
| | string | 'Loading' | Accessible label |
· circle-fade · circle-dots · circle-pulse · circle-notch · circle-quarter · circle-half · circle-split · dual-ring · ring-resize$3
dots-bounce · dots-fade · dots-pulse · dots-wave · dots-flashing · dots-elastic · dots-carousel · dots-scale · dots-orbit · dots-shuffle$3
bars · bars-fade · bars-scale · bars-wave · bars-pulse · bars-rotate$3
square-spin · square-fold · squares-grid · squares-shift · cube · cube-grid · blocks-wave · blocks-shuffle$3
line-wobble · line-scale · line-wave · line-bounce$3
heart-beat · hourglass · infinity · ripple · orbit · atom · dna · pacman · clock · gear · flower · spiral · windmill · seesaw$3
progress-bar · progress-orbit · meterHooks
$3
Hook for fetching loading messages directly.
`tsx
import { useLoadingMessage } from '@flibbertigibbeting/loading-message'function App() {
const { message, isLoading, refresh } = useLoadingMessage({
category: 'tech',
interval: 5000,
})
return
{message?.message}
}
`Utilities
$3
Array of all 55 available spinner type names.
`tsx
import { allSpinnerTypes } from '@flibbertigibbeting/loading-message'// ['circle', 'circle-fade', 'circle-dots', ...]
`$3
Spinner types organized by category.
`tsx
import { spinnerCategories } from '@flibbertigibbeting/loading-message'// {
// circle: ['circle', 'circle-fade', ...],
// dots: ['dots-bounce', 'dots-fade', ...],
// ...
// }
``MIT © flibbertigibbeting