progressCircle
Create circular progress indicators to display completion status.
Usage
const progress = block.progressCircle({
value: 75,
max: 100,
title: 'Completion',
})Props
| Prop | Description | Type | Required | Default |
|---|---|---|---|---|
| title | Title displayed near the circle | string | No | undefined |
| description | Description text | string | No | undefined |
| value | Current progress value | number | Yes | — |
| max | Maximum value (100% point) | number | Yes | — |
| radius | Radius of the progress circle in pixels | number | No | 32 |
| variant | Visual style variant | 'default' | 'neutral' | 'warning' | 'error' | 'success' | No | 'default' |
Returns
Returns a progress circle block that can be returned from a handler or passed to io.message().
Examples
Basic progress circle
return block.progressCircle({
title: 'Loading',
value: 60,
max: 100,
})Large circle
return block.progressCircle({
title: 'Download Progress',
value: 45,
max: 100,
radius: 64,
})Success variant
return block.progressCircle({
title: 'Complete',
value: 100,
max: 100,
variant: 'success',
})Warning variant
return block.progressCircle({
title: 'Memory Usage',
value: 78,
max: 100,
variant: 'warning',
})Error variant
return block.progressCircle({
title: 'CPU Usage',
value: 95,
max: 100,
variant: 'error',
})Inside a KPI card
return block.kpiCard({
name: 'Goal Progress',
value: '$8,500',
change: 12,
changeType: 'positive',
chart: {
chartType: 'progress-circle',
value: 85,
max: 100,
variant: 'default',
},
})Multiple circles in a layout
return block.layout({
columns: 12,
children: [
{
element: block.progressCircle({
title: 'Frontend',
value: 90,
max: 100,
variant: 'success',
}),
colSpan: 4,
},
{
element: block.progressCircle({
title: 'Backend',
value: 65,
max: 100,
variant: 'default',
}),
colSpan: 4,
},
{
element: block.progressCircle({
title: 'Database',
value: 45,
max: 100,
variant: 'warning',
}),
colSpan: 4,
},
],
})