Progress Ring

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

No content has been added for this component.

No content has been added for this component.

About Base

Progress Ring component


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 value
  • aria-valuemax : 100 // the largest valid value
  • aria-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

Restrictdiv
VariantTrue
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
ModifierTrue
Selector.slds-progress-ring_expired
Summary

Expired colors

Restrict.slds-progress-ring
ModifierTrue
Selector.slds-progress-ring_complete
Summary

Complete colors

Restrict.slds-progress-ring
ModifierTrue