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="fs-30">
		<span class="countTo" data-speed="1700">66</span>%
	</span>
</div>

Default Progress Bar

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

Progress Bar With Label

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

Contextual Alternatives

Show Code 
<!-- Primary -->
<div class="progress">
	<div class="progress-bar bg-primary"" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%">
	</div>
</div>

<!-- Success -->
<div class="progress">
	<div class="progress-bar bg-success"" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
	</div>
</div>

<!-- Info -->
<div class="progress">
	<div class="progress-bar bg-info"" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
	</div>
</div>

<!-- Warning -->
<div class="progress">
	<div class="progress-bar bg-warning"" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
	</div>
</div>

<!-- Danger -->
<div class="progress">
	<div class="progress-bar bg-danger"" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
	</div>
</div>

Stripped

Show Code 
<!-- Primary -->
<div class="progress progress-stripped">
	<div class="progress-bar bg-primary progress-bar-striped"" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%">
	</div>
</div>

<!-- Success -->
<div class="progress progress-stripped">
	<div class="progress-bar bg-success progress-bar-striped"" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
	</div>
</div>

<!-- Info -->
<div class="progress progress-stripped">
	<div class="progress-bar bg-info progress-bar-striped"" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
	</div>
</div>

<!-- Warning -->
<div class="progress progress-stripped">
	<div class="progress-bar bg-warning progress-bar-striped"" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
	</div>
</div>

<!-- Danger -->
<div class="progress progress-stripped">
	<div class="progress-bar bg-danger progress-bar-striped"" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
	</div>
</div>

Animated

Show Code 
<!-- Primary -->
<div class="progress">
	<div class="progress-bar bg-primary progress-bar-striped progress-bar-animated"" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%">
	</div>
</div>

<!-- Success -->
<div class="progress">
	<div class="progress-bar bg-success progress-bar-striped progress-bar-animated"" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
	</div>
</div>

<!-- Info -->
<div class="progress">
	<div class="progress-bar bg-info progress-bar-striped progress-bar-animated"" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
	</div>
</div>

<!-- Warning -->
<div class="progress">
	<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated"" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
	</div>
</div>

<!-- Danger -->
<div class="progress">
	<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated"" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
	</div>
</div>

Multiple

Show Code 
<div class="progress">
	<div class="progress-bar bg-success" style="width: 35%"></div>
	<div class="progress-bar bg-warning" style="width: 20%"></div>
	<div class="progress-bar bg-danger" style="width: 10%"></div>
</div>

Size

Show Code 
<div class="progress h-2">
	<div class="progress-bar bg-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	</div>
</div>

<div class="progress h-5">
	<div class="progress-bar bg-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	</div>
</div>

<div class="progress h-8"">
	<div class="progress-bar bg-primary" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	</div>
</div>
<div class="progress h-20"">
	<div class="progress-bar bg-warning" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	</div>
</div>

<div class="progress h-30"">
	<div class="progress-bar bg-info" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	</div>
</div>
<div class="progress h-50"">
	<div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	</div>
</div>