Progress bars

From Our Portfolio

Category Title

Featured Services

Responsive Design

Terra is a clean and modern design Joomla theme characteristic for its responsive design.

Easy Customization

Terra features plenty of options for customization in the admin that are easy to use and manage.

Powerful Tools

Terra Joomla theme ships with plenty of shortcodes that make content creation a breeze.

Awesome Support

BlueOwlCreative provides a 5-star support to all clients that purchased our awesome theme.

Our Services

Font Awesome icons

Lorem ipsum dolor sit amet, conse adipiscing elit adipiscing

Production time

Lorem ipsum dolor sit amet, conse adipiscing elit adipiscing

Production speed

Lorem ipsum dolor sit amet, conse adipiscing elit adipiscing

Responsive Layout

Lorem ipsum dolor sit amet, conse adipiscing elit adipiscing

Instant

Lorem ipsum dolor sit amet, conse adipiscing elit adipiscing

Quick Start

Lorem ipsum dolor sit amet, conse adipiscing elit adipiscing

High-Tech development

Lorem ipsum dolor sit amet, conse adipiscing elit adipiscing

New standard

Lorem ipsum dolor sit amet, conse adipiscing elit adipiscing

Color design

Lorem ipsum dolor sit amet, conse adipiscing elit adipiscing

From Our Blog

Simplest
Written by

Written on Понедельник, 05 октября 2015 07:51 in Portfolio Templates
HeartBit
Written by

Written on Пятница, 02 октября 2015 08:34 in Business Templates
Ecofood
Written by

Written on Пятница, 02 октября 2015 08:33 in VirtueMart Templates

×

Предупреждение

JUser: :_load: Не удалось загрузить пользователя с ID: 389

Basic


<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>

With label

60%


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

Contextual alternatives



<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


<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


<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


<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>