1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<div class="row">
	<div class="col-md-4">
		<div class="progress">
			<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
				<span class="sr-only">60% Complete</span>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="progress">
			<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="progress">
			<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"> 0% </div>
		</div>
	</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<div class="progress">
	<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
		<span class="sr-only">40% Complete (success)</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
		<span class="sr-only">20% Complete</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
		<span class="sr-only">60% Complete (warning)</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
		<span class="sr-only">80% Complete (danger)</span>
	</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="row">
	<div class="col-md-4">
		<h6>No Border Radius</h6>
		<div class="progress progress-no-border-radius">
			<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
				<span class="sr-only">60% Complete</span>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<h6>Border Radius</h6>
		<div class="progress progress-border-radius">
			<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
				<span class="sr-only">60% Complete</span>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<h6>Default</h6>
		<div class="progress">
			<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
				<span class="sr-only">60% Complete</span>
			</div>
		</div>
	</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="row">
	<div class="col-md-4">
		<h6>Small</h6>
		<div class="progress progress-sm">
			<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
				<span class="sr-only">60% Complete</span>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<h6>Default</h6>
		<div class="progress">
			<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
				<span class="sr-only">60% Complete</span>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<h6>Large</h6>
		<div class="progress progress-lg">
			<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
				<span class="sr-only">60% Complete</span>
			</div>
		</div>
	</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="row">
	<div class="col-md-4">
		<div class="circular-bar">
			<div class="circular-bar-chart" data-percent="75" data-plugin-options="{'barColor': '#0088CC'}">
				<strong>HTML/CSS</strong>
				<label>75%</label>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="circular-bar only-icon">
			<div class="circular-bar-chart" data-percent="55" data-plugin-options="{'barColor': '#0088CC'}">
				<em class="fas fa-star"></em>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="circular-bar single-line">
			<div class="circular-bar-chart" data-percent="58" data-plugin-options="{'barColor': '#333'}">
				<strong>HTML/CSS</strong>
			</div>
		</div>
	</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div class="row">
	<div class="col-md-4">
		<div class="circular-bar circular-bar-sm">
			<div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 85, 'lineWidth': 3, 'barColor': '#0088CC'}">
				<label>75%</label>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="circular-bar">
			<div class="circular-bar-chart" data-percent="75" data-plugin-options="{'barColor': '#0088CC'}">
				<strong>HTML/CSS</strong>
				<label>75%</label>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="circular-bar circular-bar-lg">
			<div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 250, 'barColor': '#0088CC'}">
				<strong>HTML/CSS</strong>
				<label>75%</label>
			</div>
		</div>
	</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="row">
	<div class="col-md-4">
		<div class="circular-bar">
			<div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 175, 'lineWidth': 3, 'barColor': '#0088CC', 'trackColor': '#CCC'}">
				<strong>HTML/CSS</strong>
				<label>75%</label>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="circular-bar">
			<div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 175, 'lineWidth': 10, 'lineCap': 'square','barColor': '#0088CC'}">
				<strong>HTML/CSS</strong>
				<label>75%</label>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="circular-bar">
			<div class="circular-bar-chart" data-percent="75" data-plugin-options="{'size': 175, 'lineWidth': 15, 'lineCap': 'square', 'scaleColor': '#999', 'barColor': '#0088CC'}">
				<strong>HTML/CSS</strong>
				<label>75%</label>
			</div>
		</div>
	</div>
</div>