Progress Ring

Attributes

numerator: denominator: name: forceAnimate progressbar percent

CSS Variables

--ring-color: --progress-color: --dot-color: --animation-duration:

Page Notes

This page demonstrates the gw-progress-ring control, a custom element used to visualize progress towards a task! It's created as an SVG and boasts these features:

Full screen-reader accessibility, including debounced state updates
Smooth, configurable animation
Respect for the prefers-reduced-motion media feature setting
Configurable colors
Responsive layout

To use the progress ring, simply link to the progressRingControl.js script then place a gw-progress-ring element on your page. It affords the following attributes:

numerator: Type: number. Default: 0. This represents the number of steps completed.
denominator: Type: number. Default: 0. THis represents the number of steps in the task.
name: Required. Type: string. This the accessible name of the ring.
forceAnimate: Type: boolean If present, the ring will animate irrespective of the prefers-reduce-motion media feature setting.
progressbar: Type: boolean. If present, the ring will use role=progressbar semantics. If absent, it will use role=figure semantics with accessible state updates. This is off by default due to poor screen reader support at time of authoring.
percent: Type: boolean. If present, the ring will display progress as a percentage (rounded to an integer) rather than a fraction.

It also affords the following CSS variables:

--ring-color: Type: color. Default: lightgray. The color of the non-filled portion of the ring
--progress-color: Type: color. Default: green. The color of the filled portion of the ring
--dot-color: Type: color. Default: green. The color of the progress dot
--animation-duration: Type: time. Default: 1s. The time the animations take to complete.

Files

Markup

progressRingDemo.html

Scripts

progressRingControl.js