Inline Progress Bar

More text
Left
Right
Left
Right
More text

Labeled, Static Progress Bar

Left
Right
{{staticLabeledProgbarValue}}%
Left
Right

Stacked Progress Bars

{{staticDangerValue}}%
{{staticLabeledProgbarValue}}%
{{staticSuccessValue}}%
{{staticDangerValue}}%
{{staticLabeledProgbarValue}}%
{{staticSuccessValue}}%


<h4>Inline Progress Bar</h4>
<div class="progress-block">
    <label>Simple Layout</label>
    <div class="progress">
        <progress value="..." max="100" data-displayval="...%"></progress>
    </div>
    <span>More text</span>
</div>

<div class="progress-block">
    <label>Complex Layout</label>
    <div class="progress-group">
        <div class="row">
            <div class="col-xs-6">Left</div>
            <div class="col-xs-6 text-right">Right</div>
        </div>
        <div class="progress-static">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
        </div>
        <div class="row">
            <div class="col-xs-6">Left</div>
            <div class="col-xs-6 text-right">Right</div>
        </div>
    </div>
    <span>More text</span>
</div>

<h4>Labeled, Static Progress Bar</h4>
<div class="progress-block">
    <label>Complex Layout</label>
    <div class="progress-group">
        <div class="row">
            <div class="col-xs-6">Left</div>
            <div class="col-xs-6 text-right">Right</div>
        </div>
        <div class="progress-static labeled danger">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
        <div class="row">
            <div class="col-xs-6">Left</div>
            <div class="col-xs-6 text-right">Right</div>
        </div>
    </div>
</div>

<h4>Stacked Progress Bars</h4>
<div class="progress-block">
    <label>Stacked Layout</label>
    <div class="progress-group">
        <div class="progress-static labeled danger">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
        <div class="progress-static labeled">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
        <div class="progress-static labeled success">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
    </div>
</div>

<div class="progress-block">
    <label>Stacked (but resized) Layout</label>
    <div class="progress-group" style="font-size: 1px">
        <div class="progress-static danger">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
        <div class="progress-static">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
        <div class="progress-static success">
            <div class="progress-meter" data-value="..." data-displayval="...%"></div>
            <span>...%</span>
        </div>
    </div>
</div>