LoadingDots
A component that uses a row of dots bouncing in turn to indicate loading.
Basic Usage
LoadingDots renders three dots by default. The component is an inline element, so it works both on its own and embedded in text.
Loading the latest articles
Themes & Color
Use the theme prop to set the theme of LoadingDots. It supports 'primary' (default), 'sakura', 'success', 'warning', 'danger', 'info', and 'notice'.
Pass a custom color to LoadingDots to override the color of theme.
Variant
Use the variant prop to set the animation style of the dots. It accepts 'smooth' (default) and 'pixel'. The dots of 'smooth' rise and fall smoothly, while the dots of 'pixel' jump frame by frame, which feels closer to a pixel animation.
Count
Use the count prop to set the number of dots; three dots are rendered by default. The animations of the dots are staggered in turn, and the rhythm of the stagger is adjusted automatically when the count changes.
Size and Interval
Use the dotSize prop to set the size of a single dot and the interval prop to set the spacing between the dots. A number is treated as pixels, while a string is used as a CSS length value. Both fall back to the pixel size of the theme when they are not set.
API
LoadingDotsProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| count | number | True | 3 | The number of dots in LoadingDots. | 0.2.1 |
| variant | 'smooth' | 'pixel' | True | 'smooth' | The animation style of the dots in LoadingDots. | 0.2.1 |
| interval | number | string | True | | The spacing between the dots of LoadingDots. | 0.2.1 |
| dotSize | number | string | True | | The size of a single dot in LoadingDots. | 0.2.1 |
| theme | 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info' | 'notice' | True | 'primary' | The theme of LoadingDots. | 0.2.1 |
| color | string | True | | Custom color of LoadingDots. | 0.2.1 |
| animationDuration | number | True | 1200 | The duration of a single animation cycle of LoadingDots. | 0.2.1 |