Files

• _progress-bars.scss
• progress-bars.js
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/progress-bars

Module Overview

Examples

<progress class="progress-bar" max="100" data-progress="75%">
    <div class="progress-bar">
        <div class="progress"></div>
    </div>
</progress>

Progress Bar Group

<div class="span-6 progress-bar_group">
    <h5 class="heading">HTML5</h5>
    <progress class="progress-bar" max="100" data-progress="75%">
        <div class="progress-bar">
            <div class="progress"></div>
        </div>
    </progress>
    <h5 class="heading">CSS3/SASS</h5>
    <progress class="progress-bar" max="100" data-progress="100%">
        <div class="progress-bar">
            <div class="progress"></div>
        </div>
    </progress>
    <h5 class="heading">JavaScript/jQuery</h5>
    <progress class="progress-bar" max="100" data-progress="80%">
        <div class="progress-bar">
            <div class="progress"></div>
        </div>
    </progress>
    <h5 class="heading">PHP/Wordpress</h5>
    <progress class="progress-bar" max="100" data-progress="65%">
        <div class="progress-bar">
            <div class="progress"></div>
        </div>
    </progress>
</div>

Customizing

The progress bars can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
background-color	rgba(black, 0.15)	The background color of the un-filled bar.
fill-color	color('brand', 'primary')	The fill color of the progress bar.
bar-height	1.5em	The height of the progress bar.
bar-radius	0.25em	The border-radius of the progress bar.
value-color	color('greyscale', 'white')	The color of the progress value text.
value-size	font-size('size-2')	The font size of the progress value text.
group-spacing	0.5em	The vertical spacing between each progress bar.

To change one of the above values, pass your new value(s) to the progress-bars() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include progress-bars((
    'background-color'  : #F8F8F8,
    'fill-color'        : #008de5,
    'bar-radius'        : 0
));