CSS Components and Styleguide

Progress Bars

Progress bars look like...

 <progress>
     <bar>

Examples

Default styling

.progress__bar--warning

WATCH OUT, IT'S LOADING!!!!.

.progress__bar--success

YEAH, it's loading!

.progress__bar--info

Cool...it's loading.

.progress__bar--stripey

I was a zebra in my past life.

.progress__bar--wacky

I'm abstract.

Markup: components/progress-bars/progress-bars.html

                    <div class="progress">
    <div
        class="progress__bar [modifier class]"
        role="progressbar"
        aria-valuenow="75"
        aria-valuemin="0"
        aria-valuemax="100"
        style="width: 75%;"
    ></div>
</div>

Source: components/progress-bars/_progress-bars.scss, line 1