Please wait...

Try Bacotna with other template and color skins
Index variants
Color options

Components progress bar

  1. Home
  2. Components
  3. Progress bar
00 Skill Name
00 Skill Name
00 Skill Name
00 Skill Name 
<!-- Start Progress Bar 01 -->
<div class="progress">
	<div class="progress-bar" role="progressbar" data-value-progress="75">
		<span class="value-progress">00</span>
		<span class="data-progress">Skill Name</span>
	</div>
</div>
<!-- End Progress Bar 01 -->

<!-- Start Progress Bar 02 -->
<div class="progress type1">
	<div class="progress-bar" role="progressbar" data-value-progress="75">
		<span class="value-progress">00</span>
		<span class="data-progress">Skill Name</span>
	</div>
</div>
<!-- End Progress Bar 02 -->
					
<!-- Start Progress Bar 03 -->
<div class="progress type2">
	<div class="progress-bar" role="progressbar" data-value-progress="75">
		<span class="value-progress">00</span>
		<span class="data-progress">Skill Name</span>
	</div>
</div>
<!-- End Progress Bar 03 -->
					
<!-- Start Progress Bar 04 -->
<div class="progress type3">
	<div class="progress-bar" role="progressbar" data-value-progress="75">
		<span class="value-progress">00</span>
		<span class="data-progress">Skill Name</span>
	</div>
</div>
<!-- End Progress Bar 04 -->
00 Skill Name
00 Skill Name
00 Skill Name
00 Skill Name 
<!-- Start Progress Bar 01 -->
<div class="progress progress-buttercup">
	<div class="progress-bar" role="progressbar" data-value-progress="75">
		<span class="value-progress">00</span>
		<span class="data-progress">Skill Name</span>
	</div>
</div>
<!-- End Progress Bar 01 -->

<!-- Start Progress Bar 02 -->
<div class="progress type1 progress-meadow">
	<div class="progress-bar" role="progressbar" data-value-progress="75">
		<span class="value-progress">00</span>
		<span class="data-progress">Skill Name</span>
	</div>
</div>
<!-- End Progress Bar 02 -->
					
<!-- Start Progress Bar 03 -->
<div class="progress type2 progress-mandy">
	<div class="progress-bar" role="progressbar" data-value-progress="75">
		<span class="value-progress">00</span>
		<span class="data-progress">Skill Name</span>
	</div>
</div>
<!-- End Progress Bar 03 -->
					
<!-- Start Progress Bar 04 -->
<div class="progress type3 progress-picton">
	<div class="progress-bar" role="progressbar" data-value-progress="75">
		<span class="value-progress">00</span>
		<span class="data-progress">Skill Name</span>
	</div>
</div>
<!-- End Progress Bar 04 -->
HTML
Javascript
Photoshop
Wordpress
<!-- Start Progress Bar -->
<div class="col-md-3 text-center">
	<div class="progressbar-circle" data-animate="false">
		<div class="circle crimson" data-percent="75">
			<div class="perogress-percent"></div>
			<span class="perogress-track"></span>
			<h5>HTML</h5>
		</div>
	</div>
</div>
<div class="col-md-3 text-center">
	<div class="progressbar-circle" data-animate="false">
		<div class="circle sunflower" data-percent="60">
			<div class="perogress-percent"></div>
			<span class="perogress-track"></span>
			<h5>Javascript</h5>
		</div>
	</div>
</div>
<div class="col-md-3 text-center">
	<div class="progressbar-circle" data-animate="false">
		<div class="circle apple" data-percent="80">
			<div class="perogress-percent"></div>
			<span class="perogress-track"></span>
			<h5>Photoshop</h5>
		</div>
	</div>
</div>
<div class="col-md-3 text-center">
	<div class="progressbar-circle" data-animate="false">
		<div class="circle primary" data-percent="90">
			<div class="perogress-percent"></div>
			<span class="perogress-track"></span>
			<h5>Wordpress</h5>
		</div>
	</div>
</div>
<!-- End Progress Bar -->