Progress Bars

Showing the current level of progress.

$0
$2,000
75%
Meta information about this progress bar. 

<div class="progress-bar progress-bar--linear progress-75">
    <div class="progress-bar__trench">
        <div class="progress-bar__meter"></div>
    </div>

    <div class="progress-bar__metrics">
        <div class="progress-bar-start">
            $0
        </div>
        <div class="progress-bar-goal">
            $2,000
        </div>
        <div class="progress-bar-percent">
            75%
        </div>
    </div>
</div>

Animated

$0
$2,000
75% 

<div class="progress-bar progress-bar--linear progress-bar--animated progress-75">
    <div class="progress-bar__trench">
        <div class="progress-bar__meter"></div>
    </div>

    <div class="progress-bar__metrics">
        <div class="progress-bar-start">
            $0
        </div>
        <div class="progress-bar-goal">
            $2,000
        </div>
        <div class="progress-bar-percent">
            75%
        </div>
    </div>
</div>

Class Reference

Class Info
progress-bar Primary container. Should be added to a div.
progress-bar--linear Denotes a linear progress bar.
progress-bar--animated Adds animation to the progress bar. Only used for "linear" progress bars.
progress-[percentage] Denotes how much the progress bar is filled out. Percentages are in increments of 5.
progress-bar__trench The trench of the progress bar. Should be added to a div.
progress-bar__meter The colored portion of the progress bar. Should be added to a div.
progress-bar__metrics Container for the progress bar metrics. Should be added to a div.
progress-bar__meta Meta information about the progress bar. Should be added to a div.
progress-bar-start Starting point. Should be added to a div.
progress-bar-goal End goal. Should be added to a div.
progress-bar-percent Percent of the bar that's filled up. Should be added to a div.