search-image

Search here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus diam quis arcu lobortis sagittis. Etiam eu ornare mi. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Admin templates

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus diam quis arcu lobortis sagittis. Etiam eu ornare mi. Interdum et malesuada fames ac ante ipsum primis in faucibus.

search-image

Books

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus diam quis arcu lobortis sagittis. Etiam eu ornare mi. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Progress bar

  1. Home
  2. Components
  3. Progress bar

Simple progress bar

To caption a progress bar, simply associate the value with the <progress> element.

<div class="simple-progress-bar">
    <progress class="progress" value="0" max="100"></progress>
    <progress class="progress" value="25" max="100"></progress>
    <progress class="progress" value="50" max="100"></progress>
</div>

Progress bar with label

Add a <div> with your caption text, and associate the caption with <progress> element.

Reticulating splines… 25%
Reticulating splines… 50%
Reticulating splines… 75%
<div class="label-progress-bar">
    <div class="text-xs-center">Label</div>
    <progress class="progress" value="25" max="100"></progress>
    <div class="text-xs-center">Label</div>
    <progress class="progress" value="50" max="100"></progress>
</div>

Colored progress bar

To use alert class colors in a progress bars, use the class .progress-success, .progress-warning for colored styles.

 <div class="colored-progress-bar">
    <progress class="progress progress-success" value="25" max="100"></progress>
    <progress class="progress progress-info" value="50" max="100"></progress>
    <progress class="progress progress-warning" value="75" max="100"></progress>
    <progress class="progress progress-danger" value="90" max="100"></progress>
</div>

Striped progress bar

Add .progress-striped class to display striped progress bar. It uses a gradient to create a striped effect.

<div class="striped-progress-bar">
    <progress class="progress progress-striped progress-info" value="25" max="100"></progress>
    <progress class="progress progress-striped progress-warning" value="50" max="100"></progress>
    <progress class="progress progress-striped progress-danger" value="75" max="100"></progress>
    <progress class="progress progress-striped" value="90" max="100"></progress>
</div>

Animated progress bar

Show a progress bar animation with the use of progressbar plugin. 

<div class="animated-bar" id="line-progressbar" data-plugin="progressbar" data-type="Line" data-duration="3400" data-stroke-width="3" data-color="#087380" data-trail-color="#eee" data-animate="1.0" data-svg-style="{width: '100%', height: '100%'}"></div>
/* Use id alongwith different values to customize & create different animated progress bars */

Sizing progress bar

Use .progress-sm, .progress-md and .progress-lg classes to create progress bars in different sizes.

<div class="sizing-progress-bar">
    <progress class="progress progress-sm"  value="25" max="100"></progress>
    <progress class="progress progress-md  progress-warning" value="12" max="100"></progress>
    <progress class="progress progress-danger " value="60" max="100"></progress>
    <progress class="progress progress-lg progress-info" value="44" max="100"></progress>
</div>

Vertical progress bar from bottom

Use .vertical-progress-bar class to make progress bar vertical. Add .vertical-bottom class to make progress stripes start from bottom.

75%
35%
55%
80%
20% 
<div class="vertical-progress-bar vertical-bottom">
    <div class="progress-bar">
        <div class="progress-track">
            <div class="progress-fill veritcal-progress-info">
                <span>75%</span>
            </div>
        </div>
    </div>
    <div class="progress-bar">
        <div class="progress-track">
            <div class="progress-fill veritcal-progress-warning">
                <span>35%</span>
            </div>
        </div>
    </div>
</div>

Vertical progress bar from top

Use .vertical-progress-bar class to make progress bar vertical. Add .vertical-top class to make progress stripes start from top.

25%
55%
15%
80%
45% 
<div class="vertical-progress-bar vertical-top">
    <div class="progress-bar">
        <div class="progress-track">
            <div class="progress-fill veritcal-progress-info">
                <span>75%</span>
            </div>
        </div>
    </div>
    <div class="progress-bar">
        <div class="progress-track">
            <div class="progress-fill veritcal-progress-warning">
                <span>35%</span>
            </div>
        </div>
    </div>
</div>

Progress skill

We can also make progress skills using the <progress> element.

JAVA 30%
PHP 80%
HTML 50% 
<div class="skill-progress-bar">
    <div class="skill">
        <span>Java</span>
        <span class="float-xs-right">30%</span>
    </div>
    <progress class="progress progress-warning" value="30" max="100"></progress>
    <div class="skill">
        <span>Php</span>
        <span class="float-xs-right">80%</span>
    </div>
    <progress class="progress progress-success" value="80" max="100"></progress>
</div>

Circle progress bar

Circular progress bar animations with the use of progressbar plugin. 

 <div class="circle-bar" id="circle-progressbar" data-plugin="progressbar" data-type="Circle" data-duration="3400" data-stroke-width="6" data-color="#087380" data-trail-color="#eee" data-animate="0.1" data-svg-style="null"></div>
 /* Use id alongwith different values to create the different circular progress bars */
Colors
Template
Light
Navigation
Vertical Dark
Horizontal Light
Vertical Fixed
Footer
Default
Fonts
System
  • Last Login 2h ago
  • Our Task 06
  • Weather Today 32c
  • Notifications 10