DEVELOPMENT PREVIEWIn development

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

PropTypeDefaultDescription
value
number0Progress percentage (0-100)
size
'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Size variant
variant
'primary' | 'success' | 'warning' | 'danger' | 'info' | 'glass''primary'Color variant
showLabel
booleanfalseShow percentage label
animated
booleanfalseEnable pulse animation
striped
booleanfalseShow striped pattern
indeterminate
booleanfalseIndeterminate loading state
label
stringCustom label text
shape
'rounded' | 'square' | 'pill''rounded'Border radius style
className
stringAdditional CSS classes

CircularProgress API Reference

PropTypeDefaultDescription
value
number0Progress percentage (0-100)
size
number48Size in pixels
strokeWidth
number4Stroke width in pixels
variant
'primary' | 'success' | 'warning' | 'danger' | 'info''primary'Color variant
showLabel
booleanfalseShow percentage label
indeterminate
booleanfalseIndeterminate loading state
className
stringAdditional CSS classes