Inline Progress Bar
Labeled, Static Progress Bar
{{staticLabeledProgbarValue}}%
Stacked Progress Bars
{{staticLabeledProgbarValue}}%
{{staticLabeledProgbarValue}}%
<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>