Progress Bars

How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 progress element, ensuring you can stack progress bars, animate them, and place text labels over them.

  • We use the .fui-progress as a wrapper to indicate the max value of the progress bar.
  • We use the inner .progress-bar to indicate the progress so far.
  • The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
<div class="fui-progress primary" style="height: 4px;">
	  <div class="progress-bar" style="width: 25%;"></div>
	</div>

	<div class="fui-progress primary">
	  <div class="progress-bar" style="width: 25%;"></div>
	</div>

	<div class="fui-progress secondary">
	  <div class="progress-bar" style="width: 60%;"></div>
	</div>

	<div class="fui-progress success">
	  <div class="progress-bar" style="width: 50%;"></div>
	</div>

	<div class="fui-progress danger">
	  <div class="progress-bar" style="width: 75%;"></div>
	</div>

	<div class="fui-progress warning">
	  <div class="progress-bar" style="width: 65%;"></div>
	</div>

	<div class="fui-progress gray">
	  <div class="progress-bar" style="width: 90%;"></div>
	</div>

	<div class="fui-progress info">
	  <div class="progress-bar" style="width: 95%;"></div>
	</div>

Striped Bars

To get stripe on Progress bar simply add .striped class on .progress-bar

50%
<div class="fui-progress primary" style="height: 4px;">
	  <div class="progress-bar striped" style="width: 25%;"></div>
	</div>

	<div class="fui-progress primary">
	  <div class="progress-bar striped" style="width: 25%;"></div>
	</div>

	<div class="fui-progress success">
	  <div class="progress-bar striped" style="width: 50%;"></div>
	</div>

	<div class="fui-progress secondary">
	  <div class="progress-bar striped" style="width: 50%;">50%</div>
	</div>

Animated Striped Bars

To get animated stripe on Progress bar simply add .striped .animated-stripe class on .progress-bar

50%
<div class="fui-progress primary" style="height: 4px;">
	  <div class="progress-bar striped animated-stripe" style="width: 25%;"></div>
	</div>

	<div class="fui-progress primary">
	  <div class="progress-bar striped animated-stripe" style="width: 25%;"></div>
	</div>

	<div class="fui-progress success">
	  <div class="progress-bar striped animated-stripe" style="width: 50%;"></div>
	</div>

	<div class="fui-progress secondary">
	  <div class="progress-bar striped animated-stripe" style="width: 50%;">50%</div>
	</div>