Open experiment
Donut progress card
A small conic-gradient progress component for project or quota summaries with a numeric value, a readable label, and supporting counts.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<article class="cmp-donut">
<div class="cmp-donut__chart" role="img" aria-label="72 percent complete">
<span><strong>72%</strong>complete</span>
</div>
<div>
<p>Launch checklist</p>
<h2>18 of 25 tasks</h2>
<span>7 tasks remain before release</span>
</div>
</article>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- Progress value is written as text.
- Graphic has a concise image label.
- Supporting counts clarify the total.
License: provisional component-content license; owner review is required before launch.