点状加载 LoadingDots
用一串依次跳动的点表示正在加载的组件。
基础使用
LoadingDots 默认渲染三个点。组件本身是行内元素，既可以单独使用，也可以直接嵌在文本中。
Loading the latest articles
隐藏源代码
主题与颜色
通过 theme 属性设置 LoadingDots 的主题，支持 'primary'（默认）、'sakura'、'success'、'warning'、'danger'、'info' 和 'notice'。
通过 color 为 LoadingDots 设置自定义颜色，它会覆盖 theme 的颜色。
隐藏源代码
动画风格
通过 variant 属性设置点的动画风格，可选 'smooth'（默认）与 'pixel'。'smooth' 的点会平滑起落，'pixel' 的点则逐帧跳变，更接近像素动画的感觉。
隐藏源代码
数量
通过 count 属性设置点的数量，默认渲染三个点。点与点之间的动画会依次错开，数量改变后错开的节奏也会自动调整。
隐藏源代码
尺寸与间距
通过 dotSize 属性设置单个点的尺寸，通过 interval 属性设置点与点之间的间距。
隐藏源代码
API
LoadingDotsProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| count | number | 是 | 3 | LoadingDots 中点的数量。 | 0.2.1 |
| variant | 'smooth' | 'pixel' | 是 | 'smooth' | LoadingDots 中点的动画风格。 | 0.2.1 |
| interval | number | string | 是 | | LoadingDots 中点与点之间的间距。 | 0.2.1 |
| dotSize | number | string | 是 | | LoadingDots 中单个点的尺寸。 | 0.2.1 |
| theme | 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info' | 'notice' | 是 | 'primary' | LoadingDots 的主题。 | 0.2.1 |
| color | string | 是 | | LoadingDots 的自定义颜色。 | 0.2.1 |
| animationDuration | number | 是 | 1200 | LoadingDots 中单个动画周期的时长。 | 0.2.1 |