information

You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20

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.

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 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.

Content#

The Progress Ring is currently designed to display any icon from our icon set.

Accessibility#

.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.

Base#

<div class="slds-progress-ring">
  <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
    <svg viewBox="-1 -1 2 2">
      <path class="slds-progress-ring__path" id="slds-progress-ring-path-4" d="M 1 0 A 1 1 0 1 1 1 -2.4492935982947064e-16 L 0 0"></path>

Examples#

Partially Drained#

<div class="slds-progress-ring">
  <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="88">
    <svg viewBox="-1 -1 2 2">
      <path class="slds-progress-ring__path" id="slds-progress-ring-path-7" d="M 1 0 A 1 1 0 1 1 0.7289686274214112 -0.684547105928689 L 0 0"></path>

Partially Drained with Warning Icon#

Warning

<div class="slds-progress-ring slds-progress-ring_warning">
  <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20">
    <svg viewBox="-1 -1 2 2">
      <path class="slds-progress-ring__path" id="slds-progress-ring-path-10" d="M 1 0 A 1 1 0 0 1 0.30901699437494745 0.9510565162951535 L 0 0"></path>

Partially Filled#

<div class="slds-progress-ring">
  <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40">
    <svg viewBox="-1 -1 2 2">
      <path class="slds-progress-ring__path" id="slds-progress-ring-path-13" d="M 1 0 A 1 1 0 0 0 -0.8090169943749476 -0.587785252292473 L 0 0"></path>

Partially Filled with Warning Icon#

Warning

<div class="slds-progress-ring slds-progress-ring_warning">
  <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75">
    <svg viewBox="-1 -1 2 2">
      <path class="slds-progress-ring__path" id="slds-progress-ring-path-16" d="M 1 0 A 1 1 0 1 0 6.123233995736766e-17 1 L 0 0"></path>

With Expired Icon#

Expired

<div class="slds-progress-ring slds-progress-ring_expired">
  <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
    <svg viewBox="-1 -1 2 2">
      <path class="slds-progress-ring__path" id="slds-progress-ring-path-19" d="M 1 0 A 1 1 0 0 1 1 0 L 0 0"></path>

Complete#

Complete

<div class="slds-progress-ring slds-progress-ring_complete">
  <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
    <svg viewBox="-1 -1 2 2">
      <path class="slds-progress-ring__path" id="slds-progress-ring-path-22" d="M 1 0 A 1 1 0 1 1 1 -2.4492935982947064e-16 L 0 0"></path>

Large Size#

<div class="slds-progress-ring slds-progress-ring_large">
  <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
    <svg viewBox="-1 -1 2 2">
      <path class="slds-progress-ring__path" id="slds-progress-ring-path-25" d="M 1 0 A 1 1 0 1 1 1 -2.4492935982947064e-16 L 0 0"></path>

Active Step#

<div class="slds-progress-ring slds-progress-ring_active-step">
  <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
    <svg viewBox="-1 -1 2 2">
      <path class="slds-progress-ring__path" id="slds-progress-ring-path-28" d="M 1 0 A 1 1 0 1 1 1 -2.4492935982947064e-16 L 0 0"></path>

Set the color of the ring to the active step color.

Theme - Warning#

<div class="slds-progress-ring slds-progress-ring_warning">
  <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
    <svg viewBox="-1 -1 2 2">
      <path class="slds-progress-ring__path" id="slds-progress-ring-path-31" d="M 1 0 A 1 1 0 1 1 1 -2.4492935982947064e-16 L 0 0"></path>

Set the color of the ring to the warning color.

Theme - Expired#

<div class="slds-progress-ring slds-progress-ring_expired">
  <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
    <svg viewBox="-1 -1 2 2">
      <path class="slds-progress-ring__path" id="slds-progress-ring-path-34" d="M 1 0 A 1 1 0 1 1 1 -2.4492935982947064e-16 L 0 0"></path>

Set the color of the ring to the expired color.

Theme - Complete#

<div class="slds-progress-ring slds-progress-ring_complete">
  <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
    <svg viewBox="-1 -1 2 2">
      <path class="slds-progress-ring__path" id="slds-progress-ring-path-37" d="M 1 0 A 1 1 0 1 1 1 -2.4492935982947064e-16 L 0 0"></path>

Set the color of the ring to the complete color and solid fill.

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-progress-ring`
Summary	Progress Ring component
Support	prototype
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

Progress Ring Release Notes

2.7.0

Added

Added an example of a progress ring that fills rather than drains, meaning the colored portion of the ring increases clockwise.

Progress Ring

Sections

About Progress Ring#

Implementation Guidelines#

Defining Completeness#

Content#

Accessibility#

Base#

Examples#

Partially Drained#

Partially Drained with Warning Icon#

Partially Filled#

Partially Filled with Warning Icon#

With Expired Icon#

Complete#

Large Size#

Active Step#

Theme - Warning#

Theme - Expired#

Theme - Complete#

Overview of CSS Classes#

Progress Ring Release Notes

2.7.0

Added

General Information

General Information

Required Cookies

Required Cookies

Functional Cookies

Functional Cookies

Advertising Cookies

Advertising Cookies

33Across

33Across

33Across

Sections

About Progress Ring#

Implementation Guidelines#

Defining Completeness#

Content#

Accessibility#

Base#

Examples#

Partially Drained#

Partially Drained with Warning Icon#

Partially Filled#

Partially Filled with Warning Icon#

With Expired Icon#

Complete#

Large Size#

Active Step#

Theme - Warning#

Theme - Expired#

Theme - Complete#

Overview of CSS Classes#

What are these categories?

Progress Ring Release Notes

2.7.0

Added

Cookie Consent Manager

General Information

General Information

Required Cookies

Required Cookies

First Party Cookies

Functional Cookies

Functional Cookies

First Party Cookies

Advertising Cookies

Advertising Cookies

33Across

33Across

33Across