Return to list of examples

Progress Bars

Source Code:
Output:

Note:


The attribute 'sr-only' as used with <span class="sr-only">10% Complete (danger)</span> means to only show the bar, without a label. Remove the .sr-only class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.