Loading
Provides various beautiful loading animations to enhance user experience.
Quick Start
Basic Usage
html
<r-loading name="circle"></r-loading>API Reference
Properties
| Property | Type | Default | Description |
|---|---|---|---|
name | string | 'circle' | Loading animation type |
size | string | 'medium' | Loading size: small, medium, large |
color | string | '' | Loading animation color |
Loading Types name
The component provides various beautiful loading animations
html
<r-loading name="double-bounce"></r-loading>
<r-loading name="rotate"></r-loading>
<r-loading name="stretch"></r-loading>
<r-loading name="cube"></r-loading>Custom Size size
html
<r-loading name="circle" size="small"></r-loading>
<r-loading name="circle" size="medium"></r-loading>
<r-loading name="circle" size="large"></r-loading>Custom Color color
html
<r-loading name="circle" color="#1890ff"></r-loading>
<r-loading name="circle" color="#52c41a"></r-loading>
<r-loading name="circle" color="#faad14"></r-loading>All Loading Animations
Move the mouse over the icon to see the loading animation
stretch
rotate
double-bounce
cube
dot
triple-bounce
scale-out
circle
circle-line
square
pulse
solar
cube-fold
circle-fold
cube-grid
circle-turn
circle-rotate
circle-spin
dot-bar
dot-circle
line
dot-pulse
line-scale
text
cube-dim
dot-line
arc
drop
pacman
Best Practices
- Scene Selection: Choose appropriate loading animations for different scenarios
- Size Control: Use smaller loading animations when space is limited
- Color Matching: Use colors consistent with page theme
- Performance: Avoid using too many loading animations simultaneously