WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

PROGRESS BARS

  1. Home
  2. Shortcodes
  3. Progress Bars

SHORTCODES

Hello World
66%
Show Code 
<!-- 
	data-color 	= animated bar color
	data-trackcolor	= track color
	data-size 	= width
	data-percent 	= bar percent
	data-width 	= bar thick
	data-animate	= animate time im ms (1000ms = 1s)
 -->



<!-- Icon -->
<div class="piechart" data-color="#337AB7" data-trackcolor="rgba(0,0,0,0.04)" data-size="150" data-percent="45" data-width="2" data-animate="3000">
	<i class="fa fa-facebook"></i>
</div>

<!-- Text -->
<div class="piechart" data-color="#F0AD4E" data-trackcolor="rgba(0,0,0,0.04)" data-size="150" data-percent="66" data-width="2" data-animate="3000">
	<span>Hello World</span>
</div>

<!-- Counter -->
<div class="piechart" data-color="#D9534F" data-trackcolor="rgba(0,0,0,0.04)" data-size="150" data-percent="66" data-width="10" data-animate="1700">
	<span class="size-30">
		<span class="countTo" data-speed="3000">66</span>%
	</span>
</div>

Default Progress Bar

60% Complete
Show Code 
<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; min-width: 2em;">
		<span class="sr-only">60% Complete</span>
	</div>
</div>

Progress Bar With Label

70%
0%
Show Code 
<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%; min-width: 2em;">
		70%
	</div>
</div>

Contextual Alternatives

55% Complete (success)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete
80% Complete
Show Code 
<!-- Primary -->
<div class="progress">
	<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%">
		<span class="sr-only">55% Complete (success)</span>
	</div>
</div>

<!-- Success -->
<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>

<!-- Info -->
<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>

<!-- Warning -->
<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>

<!-- Danger -->
<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>

<!-- Default -->
<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
		<span class="sr-only">80% Complete</span>
	</div>
</div>

Stripped

55% Complete (success)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete
80% Complete
Show Code 
<!-- Primary -->
<div class="progress progress-stripped">
	<div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%">
		<span class="sr-only">55% Complete (success)</span>
	</div>
</div>

<!-- Success -->
<div class="progress progress-stripped">
	<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
		<span class="sr-only">40% Complete (success)</span>
	</div>
</div>

<!-- Info -->
<div class="progress progress-stripped">
	<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
		<span class="sr-only">20% Complete</span>
	</div>
</div>

<!-- Warning -->
<div class="progress progress-stripped">
	<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
		<span class="sr-only">60% Complete (warning)</span>
	</div>
</div>

<!-- Danger -->
<div class="progress progress-stripped">
	<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
		<span class="sr-only">80% Complete</span>
	</div>
</div>

<!-- Default -->
<div class="progress progress-stripped">
	<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%">
		<span class="sr-only">55% Complete (success)</span>
	</div>
</div>

Animated

55% Complete (success)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete
80% Complete
Show Code 
<!-- Primary -->
<div class="progress">
	<div class="progress-bar progress-bar-primary progress-bar-striped active" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%">
		<span class="sr-only">55% Complete (success)</span>
	</div>
</div>

<!-- Success -->
<div class="progress">
	<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
		<span class="sr-only">40% Complete (success)</span>
	</div>
</div>

<!-- Info -->
<div class="progress">
	<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
		<span class="sr-only">20% Complete</span>
	</div>
</div>

<!-- Warning -->
<div class="progress">
	<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
		<span class="sr-only">60% Complete (warning)</span>
	</div>
</div>

<!-- Danger -->
<div class="progress">
	<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
		<span class="sr-only">80% Complete</span>
	</div>
</div>

<!-- Default -->
<div class="progress">
	<div class="progress-bar progress-bar-striped" role="progressbar active" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%">
		<span class="sr-only">55% Complete (success)</span>
	</div>
</div>

Stacked

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Show Code 
<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>

Size

60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
Show Code 
<!-- Extra Small -->
<div class="progress progress-xxs">
	<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; min-width: 2em;">
		<span class="sr-only">60% Complete</span>
	</div>
</div>


<!-- Small -->
<div class="progress progress-xs">
	<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; min-width: 2em;">
		<span class="sr-only">60% Complete</span>
	</div>
</div>


<!-- Default -->
<div class="progress">
	<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; min-width: 2em;">
		<span class="sr-only">60% Complete</span>
	</div>
</div>

<!-- Default With Label -->
<div class="progress">
	<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; min-width: 2em;">
		<span>60% Complete</span>
	</div>
</div>


<!-- Large -->
<div class="progress progress-lg">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; min-width: 2em;">
		<span class="sr-only">60% Complete</span>
	</div>
</div>

<!-- Large With Label -->
<div class="progress progress-lg">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; min-width: 2em;">
		<span>60% Complete</span>
	</div>
</div>