<p><img src="http://firecc.eu/images/FIRECCLOGOtra.png" alt="" width="445" height="136" style="display: block; margin-left: auto; margin-right: auto;" data-mce-style="display: block; margin-left: auto; margin-right: auto;"><br data-mce-bogus="1"></p><p style="text-align: center;" data-mce-style="text-align: center;"><strong>under construction</strong></p>
<p><img src="http://firecc.eu/images/FIRECCLOGOtra1.png" alt="" width="484" height="148"><br></p><div class="about-mod"><div class="about-desc" style="text-align: center;" data-mce-style="text-align: center;"><strong><span style="font-size: 12pt;" data-mce-style="font-size: 12pt;">Fire Contractors & Consultants ltd</span></strong></div></div><div class="about-mod"><div class="about-desc" style="text-align: center;" data-mce-style="text-align: center;"> </div><div class="contact-address"><ul class="contact-address"><li><strong><span style="font-size: 12pt;" data-mce-style="font-size: 12pt;"><i class="fa fa-home"> </i> <span class="contact-street">44, United Nations Str.</span></span></strong></li><li><strong><span class="contact-street" style="font-size: 12pt;" data-mce-style="font-size: 12pt;">  Orthodoxou Tower, 3rd Floor</span></strong></li><li><strong><span class="contact-street" style="font-size: 12pt;" data-mce-style="font-size: 12pt;">  6042, Larnaca, Cyprus</span></strong></li><li><span style="font-size: 12pt;" data-mce-style="font-size: 12pt;"><i class="fa fa-envelope"> </i> <span class="contact-email" style="color: #ad2a2a;" data-mce-style="color: #ad2a2a;"><a style="color: #ad2a2a;" href="#" data-mce-href="#" data-mce-style="color: #ad2a2a;">info@firecc.eu</a></span></span></li></ul></div></div>
<p><img src="http://firecc.eu/images/FIRECCLOGOtra.png" alt="" width="484" height="148" style="display: block; margin-left: auto; margin-right: auto;" data-mce-style="display: block; margin-left: auto; margin-right: auto;"><br></p><p style="text-align: center;" data-mce-style="text-align: center;"><strong>under construction</strong></p>
<p><img src="http://firecc.eu/images/FIRECCLOGOtra.png" alt="" width="484" height="148"><br data-mce-bogus="1"></p><h1 style="text-align: center;" data-mce-style="text-align: center;"><br></h1><p><br data-mce-bogus="1"></p>

0

1

2

Progress bars

Basic example

Default progress bar.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

<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</span>
  </div>
</div>

Striped

Uses a gradient to create a striped effect. Not available in IE8.

<div class="progress progress-striped">
  <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 progress-striped">
  <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 progress-striped">
  <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 progress-striped">
  <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>

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

<div class="progress progress-striped active">
  <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Stacked

Place multiple bars into the same .progress to stack them.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Back To Top