CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

All Projects

Circular Progress Bar

Display the current progress of a task using a circular SVG shape.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How To

The Circular Progress Bar component allows you to show the progress of a specific operation, using, as progress bar, a circular SVG shape.

The SVG progress bar is composed of two equal shapes: the first one creates the bar background and the second the bar fill. Changing the stroke-dashoffset and stroke-dasharray values of the second shape creates the fill effect.

To set the value of the progress, in the HTML file, make sure to:

If you wish to change the stroke of the SVG shape, make sure to change the SVG stroke-width attribute.

Because the default stroke value of the SVG elements is currentColor, you can optionally use the color utility classes to modify the color of the bar (as well as the numeric value - see demo).

Plugin Options

The Circular Progress Bar component comes with some options:

Dynamic Update

To dynamically update the value of your progress bar, use the updateProgress custom event. Here's an example of how to update the progress value:

// make sure to select the proper progress bar element - in this example we take the first available one
var cProgressBar = document.getElementsByClassName('js-c-progress-bar')[0]; 
// define the custom event 
// 1 - set the final value of the progress to 80%
// 2 - set the animation duration to 2s (this is not required)
var event = new CustomEvent('updateProgress', {detail: {value: 80, duration: 2000}});
// dispatch the event
cProgressBar.dispatchEvent(event);

Accessibility

The component includes a p.sr-only element (visually hidden) that is announced to Screen Readers. It contains a .js-c-progress-bar__aria-value element with the progress value.

<p class="sr-only" aria-live="polite" aria-atomic="true">Progress value is <span class="js-c-progress-bar__aria-value">30%</span></p>

If the progress value is dynamically updated, the value of this element is changed as well and announced to Screen Readers. 

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Be the first to know when we ship something cool!

Project duplicated.