Interactive testing environment for react-shared components
Current: Default
Animated hollow dots loading indicator with customizable appearance.
Customize the HollowDotsSpinner properties and see the changes in real-time.
| Prop | Type | Default | Description |
|---|---|---|---|
| dotsNum | number | 3 | Number of dots to display |
| dotSize | number | 15 | Size of each dot in pixels |
| animationDuration | number | 1000 | Animation duration in milliseconds |
| color | string | 'currentColor' | Border color of the dots |
| className | string | '' | Additional CSS classes |
Each dot animates with a staggered delay (300ms * index) creating a wave effect. The animation uses CSS modules for styling.
By default, the spinner uses currentColor, allowing it to inherit the text color from its parent element.
The component includes proper ARIA attributes (role="status" and aria-label="Loading") for screen readers.
The spinner automatically calculates its width based on the number of dots and their size, including horizontal margins.