Open experiment
Plasma donut meter
A single-ratio meter that combines a semantic meter role with a highly visible conic arc. Visible copy states both utilization and remaining capacity without relying on color.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<article class="cmp-plasma-meter">
<div
class="cmp-plasma-meter__ring"
role="meter"
aria-label="Storage used"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="72"
aria-valuetext="72 percent used"
>
<div><strong>72%</strong><span>used</span></div>
</div>
<section>
<span>Cloud storage</span><strong>36 of 50 GB</strong>
<p>14 GB remaining</p>
</section>
</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
- The graphic exposes a bounded meter value and accessible label.
- Percentage and remaining capacity are visible text.
- The plasma flare is decorative and removed in reduced-motion mode.
License: MIT License for open-source use, modification, and distribution.