Feedback
Progress Ring
semantic HTML작은 영역에 원형 진행률을 표시합니다.
Live example
72%
<div data-standard-component="progress-ring" class="standard-progress-ring" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72" aria-label="Upload progress"><svg viewBox="0 0 100 100" aria-hidden="true"><circle class="ring-track" cx="50" cy="50" r="42"></circle><circle class="ring-value" cx="50" cy="50" r="42" style="--ring-value:72"></circle></svg><span>72%</span></div>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.4 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
진행 작업을 설명하는 aria-label 또는 aria-labelledby를 제공하고 value와 max를 실제 작업 상태와 동기화합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->