LTR VERSION RTL VERSION

Horizontal Menu

Light
Dark
Color

card styles

Card Radius
Box-shadow none

Body Skin Modes

Default
Style 01
Style 02

Body Style

Light Mode
Dark Mode
HorizontalMenu Left Menu
View Demo Buy Now Our Portfolio
loader
Dashtic logo
Projects
App Design Projects Web Design Projects App Development Projects Back-End Projects
View Projects
Message Sent.
3 hours ago
Order Placed
5 hour ago
Event Started
45 mintues ago
Your Admin lanuched
1 daya ago
View All Notifications
img
John Thomson App Developer
Profile
Settings
Messages
Sign Out

Progress

  1. Home
  2. Elements
  3. Progress

Basic Progress

,
Html 
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-default" style="width: 7%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 20%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 40%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 60%"></div>
</div>
<div class="progress progress-md">
	<div class="progress-bar bg-primary" style="width: 80%"></div>
</div>

Contextual Progress

Html 
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-pink" style="width: 7%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-green" style="width: 20%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-yellow" style="width: 40%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-blue" style="width: 60%"></div>
</div>
<div class="progress progress-md ">
	<div class="progress-bar bg-orange" style="width: 80%"></div>
</div>

Basic Progress with label

7%
20%
40%
60%
80%
Html 
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 7%">7%</div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 20%"> 20%</div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 40%"> 40%</div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-primary" style="width: 60%"> 60%</div>
</div>
<div class="progress progress-md">
	<div class="progress-bar bg-primary" style="width: 80%"> 80%</div>
</div>

Contextual Progress with label

7%
20%
40%
60%
80%
Html 
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-pink" style="width: 7%"> 7%</div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-green" style="width: 20%">20%</div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-yellow" style="width: 40%">40%</div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-blue" style="width: 60%">60%</div>
</div>
<div class="progress progress-md ">
	<div class="progress-bar bg-orange" style="width: 80%"> 80%</div>
</div>

Progress Sizes

70%
80%
Html 
<div class="progress progress-xs mb-3">
	<div class="progress-bar bg-blue" style="width: 30%"></div>
</div>
<div class="progress progress-sm mb-3">
	<div class="progress-bar bg-blue" style="width: 60%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-blue" style="width: 70%">70%</div>
</div>
<div class="progress progress-lg">
	<div class="progress-bar bg-blue" style="width: 80%">80%</div>
</div>

Mixed color Progress with Sizes

Html 
<div class="progress progress-xs mb-3">
	<div class="progress-bar bg-orange" style="width: 5%"></div>
	<div class="progress-bar bg-warning" style="width: 5%"></div>
	<div class="progress-bar bg-info" style="width: 5%"></div>
</div>
<div class="progress progress-sm mb-3">
	<div class="progress-bar bg-pink" style="width: 10%"></div>
	<div class="progress-bar bg-yellow" style="width: 15%"></div>
	<div class="progress-bar bg-teal" style="width: 15%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar bg-pink" style="width: 18%"></div>
	<div class="progress-bar bg-blue" style="width: 20%"></div>
	<div class="progress-bar bg-cyan" style="width: 30%"></div>
</div>
<div class="progress progress-lg">
	<div class="progress-bar bg-green" style="width: 30%"></div>
	<div class="progress-bar bg-pink" style="width: 20%"></div>
	<div class="progress-bar bg-orange" style="width: 40%"></div>
</div>

Striped Progress

50%
40%
Html 
<div class="progress progress-md mb-3">
	<div class="progress-bar progress-bar-striped progress-bar-animated bg-teal" style="width: 15%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 25%"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar progress-bar-striped progress-bar-animated bg-yellow" style="width: 50%">50%</div>
</div>
<div class="progress progress-md">
	<div class="progress-bar progress-bar-striped progress-bar-animated bg-green" style="width: 70%">40%</div>
</div>

Animated Progress

Html 
<div class="progress progress-md mb-3">
	<div class="progress-bar progress-bar-indeterminate bg-pink" ></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar progress-bar-indeterminate bg-cyan"></div>
</div>
<div class="progress progress-md mb-3">
	<div class="progress-bar progress-bar-indeterminate bg-teal"></div>
</div>
<div class="progress progress-md">
	<div class="progress-bar progress-bar-indeterminate bg-purple"></div>
</div>