cicicocuk.com ireg.nmc-uk.orgeos nedirFriv
Search
en-USpt-PT

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>

Object reference not set to an instance of an object.

RECENT COMMENTS

"It's minimal not just sleek!
"Mission accomplished. It's classic!"

Libero donec, quam in etiam nulla enim eu, pharetra nulla.

RECENT PROJECTS

Check out our carefully crafted products and let us exceed your expectations.

CONTACT US

Feel free to contact us and find out more about pur products.

EDS GALORE SKIN

Galore skin is a unique skin that will satisfy all your needs regarding your webpage. Start at the very beginning or simply use our existing presets. With a few clicks you can lift your webpage to a completely higher level and feel the power of the Galore skin.

Copyright 2021 by CME / UTII Terms Of Use Privacy Statement