patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
295 lines (294 loc) • 13.5 kB
HTML
---
categories: [Widgets]
layout: page
title: Progress Bars
resource: true
---
<h2>Basic Example</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h2>With Label</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span>60% Complete</span>
</div>
</div>
<h2>Contextual Alternatives</h2>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete</span>
</div>
</div>
<h2>Striped</h2>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
<h2>Animated</h2>
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
<h2>Stacked</h2>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
<h2>PatternFly Examples</h2>
<h3>Sizes</h3>
<h4>Small</h4>
<div class="progress progress-sm">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-sm progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h4>Extra Small</h4>
<div class="progress progress-xs">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h3>With Label</h3>
<h4>Left</h4>
<div class="progress progress-label-left">
<div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
<span>5%</span>
</div>
</div>
<div class="progress progress-label-left">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span>60%</span>
</div>
</div>
<div class="progress progress-label-left">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<span>100%</span>
</div>
</div>
<div class="progress progress-sm progress-label-left">
<div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
<span>5%</span>
</div>
</div>
<div class="progress progress-sm progress-label-left">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span>60%</span>
</div>
</div>
<div class="progress progress-sm progress-label-left">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<span>100%</span>
</div>
</div>
<h4>Top Left Description and Top Right Label</h4>
<div class="progress-description">
Network Capacity
</div>
<div class="progress progress-label-top-right">
<div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
<span>5%</span>
</div>
</div>
<div class="progress-description">
<div class="spinner spinner-xs spinner-inline"></div> <strong>Downloading:</strong> Product Repositories
</div>
<div class="progress progress-label-top-right">
<div class="progress-bar" role="progressbar" aria-valuenow="42.7" aria-valuemin="0" aria-valuemax="100" style="width: 42.7%;">
<span>42.7% (35 of 82MB)</span>
</div>
</div>
<div class="progress-description">
<span class="count">46,512</span> <strong>Downloading:</strong> Product Repositories
</div>
<div class="progress progress-label-top-right">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<span>100%</span>
</div>
</div>
<div class="progress-description">
<span class="pficon pficon-ok" data-toggle="tooltip" data-placement="top" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></span> <strong>Network Activity:</strong> 10.10.121.02
</div>
<div class="progress progress-label-top-right">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<span>100%</span>
</div>
</div>
<div class="progress-description">
<span class="pficon pficon-warning-triangle-o"></span>
<strong>Network Activity:</strong> 10.10.121.02
</div>
<div class="progress progress-label-top-right">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
<span>75%</span>
</div>
</div>
<div class="progress-description">
<span class="pficon pficon-error-circle-o"></span>
<strong>Network Activity:</strong> 10.10.121.02
</div>
<div class="progress progress-label-top-right">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
<span>10%</span>
</div>
</div>
<h4>Left Description</h4>
<div class="progress-container progress-description-left">
<div class="progress-description">
CPU
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
<span class="sr-only"><strong>25 of 460</strong> MHz</span>
</div>
</div>
</div>
<div class="progress-container progress-description-left">
<div class="progress-description">
Network Capacity
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
<span class="sr-only"><strong>250 of 4600</strong> MHz</span>
</div>
</div>
</div>
<h4>Left Description and Right Label</h4>
<div class="progress-container progress-description-left progress-label-right">
<div class="progress-description">
CPU
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
<span><strong>25 of 460</strong> MHz</span>
</div>
</div>
</div>
<div class="progress-container progress-description-left progress-label-right">
<div class="progress-description">
Network Capacity
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
<span><strong>250 of 4600</strong> MHz</span>
</div>
</div>
</div>
<h3>In Table Cell</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column content</td>
<td>
<div class="progress progress-sm progress-label-left progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;">
<span>5%</span>
</div>
</div>
</td>
<td>Column content</td>
</tr>
<tr>
<td>Column content</td>
<td>
<div class="progress progress-sm progress-label-left progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span>60%</span>
</div>
</div>
</td>
<td>Column content</td>
</tr>
<tr>
<td>Column content</td>
<td>
<div class="progress progress-sm progress-label-left progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
<span>100%</span>
</div>
</div>
</td>
<td>Column content</td>
</tr>
</tbody>
</table>
<h3>With Tooltip</h3>
<h4>On Filled Bar</h4>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" data-toggle="tooltip" title="60% Used">
<span class="sr-only">60% Used</span>
</div>
</div>
<h4>On Filled Bar and Negative Space</h4>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;" data-toggle="tooltip" title="60% Used">
<span class="sr-only">60% Used</span>
</div>
<div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;" data-toggle="tooltip" title="40% Available">
<span class="sr-only">40% Available</span>
</div>
</div>
<script>
// Initialize Tooltip
jQuery(document).ready(function() {
jQuery('[data-toggle="tooltip"]').tooltip();
});
</script>