Style guide should be recommending the native progress element and not Bootstrap's version

[pjackson28]

The style guide currently recommends using Bootstrap's markup for creating a progress bar. HTML5 already has markup dedicated to that purpose so we should not be faking it with div elements and WAI-ARIA attributes. If you want the Bootstrap look, then apply class="progress" to the progress element. We should be going with semantically correct elements first, then applying the appropriate look.

/cc @cfarquharson

[pjackson28]

Should also identify the difference explain why we are using the progress element rather than Bootstrap's div-based approach (so they notice that we are not using Bootstrap's regular markup in this case).

[shawnthompson]

You have to apply the class progress to the progress element and you can't change the colour, or maybe you can and I couldn't figure it out... Still want that bar 100% of the container though.

[pjackson28]

You can change the colour, it is just you need to use vendor prefixed properties to do it. We could always normalize it through overrides. The 100% should probably be done as an add-on class rather than a global change.

[shawnthompson]

Agreed about the addon class for the width but I tried the vendor coulor classes quickly and they didn't work.

[pjackson28]

I know it can be done as we normalized the progress bar for the multimedia player. Here is the relevant snippet of SCSS from the multimedia player:

    progress {
        width: 100%;
        height: 16px;
        display: block;
        /* Important Thing */
        -webkit-appearance: none;
        border: none;
        &::-webkit-progress-bar, &::-moz-progress-bar {
            background: #fff;
        }
        /* Now the value part */
        &::-webkit-progress-value {
            background: #176CA7;
        }
    }