Progress
Display progress and loading states with linear and circular indicators.
Basic Progress
Snippet
import { Progress } from '@creo-team/buzz-ui/server'
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />
Sizes
Snippet
<Progress value={60} size="xs" />
<Progress value={60} size="sm" />
<Progress value={60} size="md" />
<Progress value={60} size="lg" />
<Progress value={60} size="xl" />
Variants
Snippet
<Progress value={70} variant="primary" />
<Progress value={70} variant="success" />
<Progress value={70} variant="warning" />
<Progress value={70} variant="danger" />
<Progress value={70} variant="info" />
<Progress value={70} variant="glass" />
With Labels
Progress35%
Download Progress65%
Processing85%
Snippet
<Progress value={35} showLabel />
<Progress value={65} showLabel label="Download Progress" />
<Progress value={85} showLabel label="Processing" variant="success" />
Shapes
Snippet
<Progress value={60} shape="rounded" />
<Progress value={60} shape="square" />
<Progress value={60} shape="pill" />
Animated & Striped
Snippet
<Progress value={40} animated />
<Progress value={60} striped />
<Progress value={80} striped animated variant="success" />
Indeterminate State
Loading...
Snippet
<Progress indeterminate />
<Progress indeterminate variant="info" />
<Progress indeterminate showLabel label="Loading..." />
Circular Progress
Snippet
import { CircularProgress } from '@creo-team/buzz-ui/client'
<CircularProgress value={25} />
<CircularProgress value={50} variant="success" />
<CircularProgress value={75} variant="warning" />
<CircularProgress value={100} variant="danger" />
Circular Sizes & Labels
60%
60%
60%
Snippet
<CircularProgress value={60} size={32} strokeWidth={3} />
<CircularProgress value={60} size={48} strokeWidth={4} showLabel />
<CircularProgress value={60} size={64} strokeWidth={5} showLabel />
<CircularProgress value={60} size={80} strokeWidth={6} showLabel />
Circular Indeterminate
Snippet
<CircularProgress indeterminate />
<CircularProgress indeterminate size={64} variant="info" />
<CircularProgress indeterminate size={80} variant="success" strokeWidth={8} />
Dynamic Progress
Auto-updating0%
0%
Snippet
const [value, setValue] = useState(0)
// Update progress
useEffect(() => {
const interval = setInterval(() => {
setValue(prev => (prev >= 100 ? 0 : prev + 10))
}, 1000)
return () => clearInterval(interval)
}, [])
Progress API Reference
Prop | Type | Default | Description |
---|---|---|---|
value | number | 0 | Progress percentage (0-100) |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size variant |
variant | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'glass' | 'primary' | Color variant |
showLabel | boolean | false | Show percentage label |
animated | boolean | false | Enable pulse animation |
striped | boolean | false | Show striped pattern |
indeterminate | boolean | false | Indeterminate loading state |
label | string | — | Custom label text |
shape | 'rounded' | 'square' | 'pill' | 'rounded' | Border radius style |
className | string | — | Additional CSS classes |
CircularProgress API Reference
Prop | Type | Default | Description |
---|---|---|---|
value | number | 0 | Progress percentage (0-100) |
size | number | 48 | Size in pixels |
strokeWidth | number | 4 | Stroke width in pixels |
variant | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'primary' | Color variant |
showLabel | boolean | false | Show percentage label |
indeterminate | boolean | false | Indeterminate loading state |
className | string | — | Additional CSS classes |
Full API: /components/progress/api