SVG circular progress arc that animates from 0 to the target value on mount using CSS stroke-dashoffset transition. Percentage is displayed in the centre. Replaces the prior placeholder implementation with a proper animated SVG arc. No JavaScript required.
| Surface | Note |
|---|---|
| Renders as a static arc at target value without mount animation |
| Field | Type | |
|---|---|---|
| value | integer. The progress value (0–100). | required |
| label | string. Caption text below the circle. | optional |
| color | string. Arc stroke colour. Default "#38bdf8". | optional |
| size | "sm" | "md" | "lg" (optional, default "md"). Circle diameter. | optional |
{
"type": "progress_circle",
"value": 75
}{
"identifier": "urn:air:a2uicatalog.ai:atom:progress_circle",
"displayName": "Progress Circle",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/progress_circle",
"capabilities": [
"web",
"meet-stage",
"gas-sidebar",
"apps-script-web"
],
"description": "SVG circular progress arc that animates from 0 to the target value on mount using CSS stroke-dashoffset transition. Percentage is displayed in the centre. Replaces the prior placeholder implementation with a proper animated SVG arc. No JavaScript required.",
"representativeQueries": [
"show a CSS stroke-dashoffset animated SVG progress arc with centre percentage",
"svg circular progress arc that animates from 0 to the target value on mount using css stroke-dashoff",
"render a progress circle"
]
}The renderer is open source. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.
git clone https://github.com/a2uicatalog/a2ui
cd apps-script-surface/gas-schema-renderer
clasp push && clasp deploy