joomla-blank-template-slider-2e61c54b4-20c1-dedc-9c84-09f1dbf5da53D233BE24-5C09-3EFB-AAE9-0EF9E8705F49.png
Fast & Light Joomla Responsive Template
joomla-blank-template-slider-1715de3de-4f6e-4ab8-de5d-50f11bc1553aC53BD9A0-298A-8D98-C42F-63340225DCFA.png
Fast & Light Joomla Responsive Template

From Our Portfolio

Featured Services


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

Basic

60% Complete

<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

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete


<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

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

<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

45% Complete

<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

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

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