🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Percentage Bar

A bar graph used to display a percentage distribution.

Copy: View demo

Dependencies

All components are based on CodyFrame.

How to

The Percentage Bar component is used to display a bar where data is organized in subdivisions.

The bar chart is created in JavaScript. The data value of each subdivision is set using the .js-pct-bar__value element.

<!-- ... -->
  <li>
    <span>Label 2 (<i class="js-pct-bar__value" data-pct-bar-bg="bg-contrast-low">28%</i>)</span>
  </li>
<!-- ... -->

The data-pct-bar-bg data attribute is used to set the color of the bar subdivision. You can pass a background utility class.

Optionally, you can replace data-pct-bar-bg with data-pct-bar-style, and pass inline CSS (that will affect the bar subdivision):

<!-- ... -->
  <li>
    <span>Label 2 (<i class="js-pct-bar__value" data-pct-bar-style="background-color: indigo;">28%</i>)</span>
  </li>
<!-- ... -->

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us