XLoading — Loading Animation
A variety of pure CSS / SVG loading animations, zero third-party dependencies. Supports customization of size, color, speed and caption.
Live Demo
gear
vue
<XLoading text="circle" />
<XLoading type="leap" color="#409eff" />
<XLoading type="orbit" color="#ef4444" />
<XLoading type="gear" color="#722ed1" size="56" text="gear" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | 'circle' | Animation style: circle/leap/bar/boxes/typewriter/orbit/gear/dots/... |
size | number | 40 | Size (px) |
color | string | '' | Animation color; uses the theme accent when omitted |
speed | number | 1.4 | Animation speed (e.g. the SVG orbit duration in seconds) |
text | string | '' | Caption shown below |
Style Gallery
- circle: 8-dot ring ripple (default).
- leap: three bouncing balls.
- bar: rectangular progress bar.
- boxes: 3D isometric blocks.
- typewriter: typewriter effect.
- orbit: a small ball rolling along an ∞ path (speed controlled by
speed). - gear: meshing gears spinning.
- dots: three bouncing dots.