en-USde-DE
Language
Search
× Search
Menu
  1. Home
  2. Blog
  3. Gallery
  4. Groups
  5. Features
  6. Pages
  7. Contact us
    Address: Some address goes here
    Phone: +12 345 678 9
    Fax: +12 345 678 9
    Email: email@email.com
    Web: www.webpage.com

    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica.

Sunday, August 19, 2018
FeaturesTypographyProgress Bar

Progress Bar

PROGRESS BAR

Basic example 60% Complete
60% Complete
<div class="progress">
	<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">
	<span class="sr-only">60% Complete</span>
	</div>
</div>
With label 60%
60%
<div class="progress">
	<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar">60%
	</div>
</div>
Low percentages 0%
0%
<div class="progress">
	<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar">
	0%
	</div>
</div>
Low percentages 2%
2%
<div class="progress">
	<div style="width: 2%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="2" role="progressbar" class="progress-bar">
	2%
	</div>
</div>
Contextual alternatives 40% Complete (success) 20% Complete 60% Complete (warning) 80% Complete (danger)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete
<div class="progress">
	<div style="width: 40%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-success">
	<span class="sr-only">40% Complete (success)</span>
	</div>
</div>
<div class="progress">
	<div style="width: 20%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-info">
	<span class="sr-only">20% Complete</span>
	</div>
</div>
<div class="progress">
	<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-warning">
	<span class="sr-only">60% Complete (warning)</span>
	</div>
</div>
<div class="progress">
	<div style="width: 80%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar progress-bar-danger">
	<span class="sr-only">80% Complete</span>
	</div>
</div>
Striped 40% Complete (success) 20% Complete 60% Complete (warning) 80% Complete (danger)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<div class="progress">
	<div style="width: 40%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-success progress-bar-striped">
	<span class="sr-only">40% Complete (success)</span>
	</div>
</div>
<div class="progress">
	<div style="width: 20%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-info progress-bar-striped">
	<span class="sr-only">20% Complete</span>
	</div>
</div>
<div class="progress">
	<div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-warning progress-bar-striped">
	<span class="sr-only">60% Complete (warning)</span>
	</div>
</div>
<div class="progress">
	<div style="width: 80%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar progress-bar-danger progress-bar-striped">
	<span class="sr-only">80% Complete (danger)</span>
	</div>
</div>
Animated 45% Complete
45% Complete
<div class="progress">
	<div style="width: 45%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45" role="progressbar" class="progress-bar progress-bar-striped active">
		<span class="sr-only">45% Complete</span>
	</div>
</div>
Stacked 35% Complete (success) 20% Complete (warning) 10% Complete (danger)
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<div class="progress">
	<div style="width: 35%;" class="progress-bar progress-bar-success">
		<span class="sr-only">35% Complete (success)</span>
	</div>
	<div style="width: 20%;" class="progress-bar progress-bar-warning progress-bar-striped">
		<span class="sr-only">20% Complete (warning)</span>
	</div>
	<div style="width: 10%;" class="progress-bar progress-bar-danger">
		<span class="sr-only">10% Complete (danger)</span>
	</div>
</div>

Animated Progress Loading

90% Complete
65% Complete
80% Complete
50% Complete
View Code
<div class="progress">
    <div class="progress-bar progress-bar-info eds_progressAnimated" style="width: 90%;">
        <span class="sr-only">90% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success eds_progressAnimated" style="width: 65%;">
        <span class="sr-only">65% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning eds_progressAnimated" style="width: 80%;">
        <span class="sr-only">80% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger eds_progressAnimated" style="width: 50%;">
        <span class="sr-only">50% Complete</span>
    </div>
</div>