Please wait...

Try Sallira with other theme and color combinations
Index variants
Color options

Theme components

  1. Home
  2. Components
  3. Progress bar
Default size
Small
Progress bar medium
Progress bar medium 
<div class="progress progress-sm">
	<div class="progress-bar" role="progressbar" data-value-progress="60">
		<span class="value-progress">Small</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar" role="progressbar" data-value-progress="80">
		<span class="value-progress">Progress bar medium</span>
	</div>
</div>
<div class="progress progress-lg">
	<div class="progress-bar" role="progressbar" data-value-progress="50">
		<span class="value-progress">Progress bar medium</span>
	</div>
</div>
Progress bar color
Progress bar default
Progress bar primary
Progress bar blue
Progress bar purple
Progress bar pink
Progress bar yellow
Progress bar green
Progress bar red 
<div class="progress">
	<div class="progress-bar" role="progressbar" data-value-progress="60">
		<span class="value-progress">Progress bar default</span>
	</div>
</div>
<div class="progress progress-primary">
	<div class="progress-bar" role="progressbar" data-value-progress="45">
		<span class="value-progress">Progress bar primary</span>
	</div>
</div>
<div class="progress progress-blue">
	<div class="progress-bar"  role="progressbar" data-value-progress="50">
		<span class="value-progress">Progress bar blue</span>
	</div>
</div>
<div class="progress progress-purple">
	<div class="progress-bar"  role="progressbar" data-value-progress="70">
		<span class="value-progress">Progress bar purple</span>
	</div>
</div>
<div class="progress progress-pink">
	<div class="progress-bar"  role="progressbar" data-value-progress="65">
		<span class="value-progress">Progress bar pink</span>
	</div>
</div>
<div class="progress progress-yellow">
	<div class="progress-bar"  role="progressbar" data-value-progress="40">
		<span class="value-progress">Progress bar yellow</span>
	</div>
</div>
<div class="progress progress-green">
	<div class="progress-bar"  role="progressbar" data-value-progress="55">
		<span class="value-progress">Progress bar green</span>
	</div>
</div>
<div class="progress progress-red">
	<div class="progress-bar"  role="progressbar" data-value-progress="40">
		<span class="value-progress">Progress bar red</span>
	</div>
</div>
Progres circle
<canvas class="circle-progress primary" 
	data-percentage="65" 
	data-speed="50" 
	data-font-color="#6f6f6f" 
	data-remaining-color="#e5e5e5"
	data-font-size="14px"  
	data-diameter="40" 
	data-rounded="true" 
	data-line-width="5">
</canvas>

<canvas class="circle-progress primary" 
	data-percentage="65" 
	data-speed="50" 
	data-font-color="#6f6f6f" 
	data-remaining-color="#e5e5e5"
	data-font-size="18px"  
	data-diameter="50" 
	data-rounded="true" 
	data-line-width="10">
</canvas>

<canvas class="circle-progress primary" 
	data-percentage="65" 
	data-speed="50" 
	data-font-color="#6f6f6f" 
	data-remaining-color="#e5e5e5"
	data-font-size="24px"  
	data-diameter="60" 
	data-rounded="true" 
	data-line-width="15">
</canvas>
Progress circle color
<canvas class="circle-progress" 
	data-percentage="65" 
	data-speed="50" 
	data-font-color="#6f6f6f" 
	data-remaining-color="#e5e5e5"
	data-font-size="18px"  
	data-diameter="50" 
	data-rounded="true" 
	data-line-width="10">
</canvas>

<canvas class="circle-progress primary" 
	data-percentage="65" 
	data-speed="50" 
	data-font-color="#6f6f6f" 
	data-remaining-color="#e5e5e5"
	data-font-size="18px"  
	data-diameter="50" 
	data-rounded="true" 
	data-line-width="10">
</canvas>

<canvas class="circle-progress blue" 
	data-percentage="65" 
	data-speed="50" 
	data-font-color="#6f6f6f" 
	data-remaining-color="#e5e5e5"
	data-font-size="24px"  
	data-diameter="60" 
	data-rounded="true" 
	data-line-width="15">
</canvas>

<canvas class="circle-progress purple" 
	data-percentage="65" 
	data-speed="50" 
	data-font-color="#6f6f6f" 
	data-remaining-color="#e5e5e5"
	data-font-size="24px"  
	data-diameter="60" 
	data-rounded="true" 
	data-line-width="15">
</canvas>

<canvas class="circle-progress pink" 
	data-percentage="65" 
	data-speed="50" 
	data-font-color="#6f6f6f" 
	data-remaining-color="#e5e5e5"
	data-font-size="24px"  
	data-diameter="60" 
	data-rounded="true" 
	data-line-width="15">
</canvas>

<canvas class="circle-progress yellow" 
	data-percentage="65" 
	data-speed="50" 
	data-font-color="#6f6f6f" 
	data-remaining-color="#e5e5e5"
	data-font-size="24px"  
	data-diameter="60" 
	data-rounded="true" 
	data-line-width="15">
</canvas>

<canvas class="circle-progress green" 
	data-percentage="65" 
	data-speed="50" 
	data-font-color="#6f6f6f" 
	data-remaining-color="#e5e5e5"
	data-font-size="24px"  
	data-diameter="60" 
	data-rounded="true" 
	data-line-width="15">
</canvas>

<canvas class="circle-progress red" 
	data-percentage="65" 
	data-speed="50" 
	data-font-color="#6f6f6f" 
	data-remaining-color="#e5e5e5"
	data-font-size="24px"  
	data-diameter="60" 
	data-rounded="true" 
	data-line-width="15">
</canvas>