Progress Ring
Customizable and configurable progress ring. Will display progress in a circular progress bar factor, and is capable of displaying iconography inside of the ring structure.
Base
Preview
About Progress Ring
The Progress Ring component renders a svg-based progress ring.
Content (typically iconography) can be rendered inside the progress ring. For the current supported size of this progress ring, xxs sized icons should be used.
Implementation Guidelines
Defining Progress Ring Completeness
The 'completeness' of the Progress Ring is indicated by the circular shape (pie slice), which is a svg shape of an arc.
The path declaration looks complex, but is actually pretty straightforward, with just a few parts that need customization.
The breakdown of the progress ring's d
attribute can be broken down like so:
d="M 1 0 A 1 1 0 {isLong} 1 {arcX} {arcY} L 0 0"
- isLong: a binary flag if the arc should 'take the long path' (used for > 50% fill)
- arcX: the arc's x position, formulated by Math.cos(2 * Math.PI * fillPercent)
- arcY: the arc's y position, formulated by Math.sin(2 * Math.PI * fillPercent)
These calculations work in accordance with the defined svg viewBox, which goes from -1 to 1, on both x and y axis.
Progress Ring Content
The Progress Ring is currently designed to display any icon from our icon set.
Accessibility Guidelines
.slds-progress-ring__progress
is the visual indicator of progress and needs proper aria roles and settings:
role
:progressbar
aria-valuemin
:0
// the smallest valid valuearia-valuemax
:100
// the largest valid valuearia-valuenow
:{fill}
// the current fill value
Proper accessibility guidelines should be followed on any icons used within this Progress Ring component.
Overview of CSS Classes
Selector | .slds-progress-ring |
---|---|
Summary | Progress Ring component |
Restrict | div |
Variant | True |
Selector | .slds-progress-ring__progress |
---|---|
Summary | Progress indicator |
Restrict | .slds-progress-ring div |
Selector | .slds-progress-ring__path |
---|---|
Summary | |
Restrict | .slds-progress-ring__progress path |
Selector | .slds-progress-ring__content |
---|---|
Summary | Progress ring content area |
Restrict | .slds-progress-ring > div |
Selector | .slds-progress-ring_warning |
---|---|
Summary | Warning colors |
Restrict | .slds-progress-ring |
Modifier | True |
Selector | .slds-progress-ring_expired |
---|---|
Summary | Expired colors |
Restrict | .slds-progress-ring |
Modifier | True |
Selector | .slds-progress-ring_complete |
---|---|
Summary | Complete colors |
Restrict | .slds-progress-ring |
Modifier | True |
Selector | .slds-progress-ring_large |
---|---|
Summary | Larger ring size |
Restrict | .slds-progress-ring |
Modifier | True |
Selector | .slds-progress-ring_active-step |
---|---|
Summary | Blue progress ring |
Restrict | .slds-progress-ring |
Modifier | True |