<div class="progress bordered">
		<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<div class="progress bordered">
		<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<div class="progress bordered">
		<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	
	
						

How to use

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

• Use the .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.
• The .progress-bar also requires some role and aria attributes to make it accessible.
• Add labels to your progress bars by placing text within .progress-bar
• Used class .bordered to set a border around the progressbar

	<div class="progress bordered">
		<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<div class="progress bordered">
		<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<div class="progress bordered">
		<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<div class="progress bordered">
		<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	
	<!-- striped progress bar -->
	<div class="progress bordered">
		<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<div class="progress bordered">
		<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<div class="progress bordered">
		<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<div class="progress bordered">
		<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
	<div class="progress bordered">
		<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
	</div>

						

how to use

• use contextual classes for balckground color with .bg-success with .progress-bar For avaliable contextual class see here
• Use .progress-bar-striped for stripped background

	<div class="progress bordered">
		<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
		<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
		<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
	</div>

						

How to use

• Set .progress-bar width either inline styling or using the class

	<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>

						

How to use

• Use .progress-bar-animated for animated progressbar

	<div data-value="0.85" 
		data-thickness="6"
      	class="circle1"
		data-fill="{
        "color": "#7bd1df"
      	}" > 
		<strong>85%</strong>
		<span class="text">Wordpress</span>
	</div>

						

How to use

• Circle progress bar is designed using jquery-circle-progress api.
• Use a class of ID as a hook in the main js file.
• You can either declare values using data- attribute like the code above or through the javascript as shown below.

  
  	$('#circle1').circleProgress({
  	    value: 0.75,
  	    size: 80,
  	    fill: {
  	      gradient: ["red", "orange"]
  	    }
  	  });