Progress Bars

Plugin for bootstrap's progressbar for displaying text and animations
  1. Home
  2. Elements
  3. Progress Bars

Sequential Loading

<div class="block-progress progress-sequence clearfix wow fadeIn">
  <div class="progress-title-wrapper text-center">
    <h2 class="average-heading">Our skills:</h2>
    <p class="lead-alt">(approximately)</p>
  </div>
  <p class="progress-line-title">HTML / Markup</p>
  <div class="progress">
    <div class="progress-bar" data-transitiongoal="95%">
      <span>95%</span>
    </div>
  </div>
  <p class="progress-line-title">CSS / SCSS</p>
  <div class="progress">
    <div class="progress-bar" data-transitiongoal="80%">
      <span>80%</span>
    </div>
  </div>
  <p class="progress-line-title">JS / CoffeScript</p>
  <div class="progress">
    <div class="progress-bar" data-transitiongoal="85%">
      <span>85%</span>
    </div>
  </div>
  <p class="progress-line-title">PHP</p>
  <div class="progress">
    <div class="progress-bar" data-transitiongoal="55%">
      <span>55%</span>
    </div>
  </div>
</div>

Our skills:

(approximately)

HTML / Markup

95%

CSS / SCSS

80%

JS / CoffeScript

85%

PHP

55%

Parallel Loading

<div class="block-progress progress-parallel clearfix wow fadeInDown">
  <p class="progress-line-title">HTML / Markup</p>
  <div class="progress">
    <div class="progress-bar" data-transitiongoal="95%">
      <span>95%</span>
    </div>
  </div>
  <p class="progress-line-title">CSS / SCSS</p>
  <div class="progress">
    <div class="progress-bar" data-transitiongoal="80%">
      <span>80%</span>
    </div>
  </div>
  <p class="progress-line-title">JS / CoffeScript</p>
  <div class="progress">
    <div class="progress-bar" data-transitiongoal="85%">
      <span>85%</span>
    </div>
  </div>
  <p class="progress-line-title">PHP</p>
  <div class="progress">
    <div class="progress-bar" data-transitiongoal="55%">
      <span>55%</span>
    </div>
  </div>
</div>

HTML / Markup

95%

CSS / SCSS

80%

JS / CoffeScript

85%

PHP

55%

No animation

<div class="block-progress progress-no-anim clearfix wow fadeInRight">
  <p class="progress-line-title">HTML / Markup</p>
  <div class="progress">
    <div class="progress-bar" data-transitiongoal="95%">
      <span>95%</span>
    </div>
  </div>
  <p class="progress-line-title">CSS / SCSS</p>
  <div class="progress">
    <div class="progress-bar" data-transitiongoal="80%">
      <span>80%</span>
    </div>
  </div>
  <p class="progress-line-title">JS / CoffeScript</p>
  <div class="progress">
    <div class="progress-bar" data-transitiongoal="85%">
      <span>85%</span>
    </div>
  </div>
  <p class="progress-line-title">PHP</p>
  <div class="progress">
    <div class="progress-bar" data-transitiongoal="55%">
      <span>55%</span>
    </div>
  </div>
</div>

HTML / Markup

95%

CSS / SCSS

80%

JS / CoffeScript

85%

PHP

55%

Alternative title

<div class="block-progress progress-no-anim clearfix">
  <div class="progress">
    <div class="progress-bar kate-bg-danger" data-transitiongoal="95%">
      <span>HTML / Markup - 95%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar kate-bg-danger" data-transitiongoal="80%">
      <span>CSS / SCSS - 80%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar kate-bg-danger" data-transitiongoal="85%">
      <span>JS / CoffeScript - 85%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar kate-bg-danger" data-transitiongoal="55%">
      <span>PHP - 55%</span>
    </div>
  </div>
</div>
HTML / Markup - 95%
CSS / SCSS - 80%
JS / CoffeScript - 85%
PHP - 55%

B&W color

<div class="block-progress progress-no-anim clearfix">
  <p class="progress-line-title">HTML / Markup</p>
  <div class="progress">
    <div class="progress-bar bg-555" data-transitiongoal="95%">
      <span>95%</span>
    </div>
  </div>
  <p class="progress-line-title">CSS / SCSS</p>
  <div class="progress">
    <div class="progress-bar bg-555" data-transitiongoal="80%">
      <span>80%</span>
    </div>
  </div>
  <p class="progress-line-title">JS / CoffeScript</p>
  <div class="progress">
    <div class="progress-bar bg-555" data-transitiongoal="85%">
      <span>85%</span>
    </div>
  </div>
  <p class="progress-line-title">PHP</p>
  <div class="progress">
    <div class="progress-bar bg-555" data-transitiongoal="55%">
      <span>55%</span>
    </div>
  </div>
</div>

HTML / Markup

95%

CSS / SCSS

80%

JS / CoffeScript

85%

PHP

55%

Vertical progressbar

<div class="block-progress progress-no-anim clearfix">
  <div class="vertical-progress-wrapper text-center">
    <div class="progress vertical bottom">
      <div class="progress-bar kate-bg-info" data-transitiongoal="95%">
        <span>95%</span>
      </div>
    </div>
    <div class="progress vertical bottom">
      <div class="progress-bar kate-bg-info" data-transitiongoal="80%">
        <span>80%</span>
      </div>
    </div>
    <div class="progress vertical bottom">
      <div class="progress-bar kate-bg-info" data-transitiongoal="85%">
        <span>85%</span>
      </div>
    </div>
    <div class="progress vertical bottom">
      <div class="progress-bar kate-bg-info" data-transitiongoal="55%">
        <span>55%</span>
      </div>
    </div>
  </div>
</div>
95%
80%
85%
55%

Success color

<div class="block-progress progress-no-anim clearfix">
  <p class="progress-line-title">HTML / Markup</p>
  <div class="progress">
    <div class="progress-bar kate-bg-success" data-transitiongoal="95%">
      <span>95%</span>
    </div>
  </div>
  <p class="progress-line-title">CSS / SCSS</p>
  <div class="progress">
    <div class="progress-bar kate-bg-success" data-transitiongoal="80%">
      <span>80%</span>
    </div>
  </div>
  <p class="progress-line-title">JS / CoffeScript</p>
  <div class="progress">
    <div class="progress-bar kate-bg-success" data-transitiongoal="85%">
      <span>85%</span>
    </div>
  </div>
  <p class="progress-line-title">PHP</p>
  <div class="progress">
    <div class="progress-bar kate-bg-success" data-transitiongoal="55%">
      <span>55%</span>
    </div>
  </div>
</div>

HTML / Markup

95%

CSS / SCSS

80%

JS / CoffeScript

85%

PHP

55%

Info color

<div class="block-progress progress-no-anim clearfix">
  <p class="progress-line-title">HTML / Markup</p>
  <div class="progress">
    <div class="progress-bar kate-bg-info" data-transitiongoal="95%">
      <span>95%</span>
    </div>
  </div>
  <p class="progress-line-title">CSS / SCSS</p>
  <div class="progress">
    <div class="progress-bar kate-bg-info" data-transitiongoal="80%">
      <span>80%</span>
    </div>
  </div>
  <p class="progress-line-title">JS / CoffeScript</p>
  <div class="progress">
    <div class="progress-bar kate-bg-info" data-transitiongoal="85%">
      <span>85%</span>
    </div>
  </div>
  <p class="progress-line-title">PHP</p>
  <div class="progress">
    <div class="progress-bar kate-bg-info" data-transitiongoal="55%">
      <span>55%</span>
    </div>
  </div>
</div>

HTML / Markup

95%

CSS / SCSS

80%

JS / CoffeScript

85%

PHP

55%

Warning color

<div class="block-progress progress-no-anim clearfix">
  <p class="progress-line-title">HTML / Markup</p>
  <div class="progress">
    <div class="progress-bar kate-bg-warning" data-transitiongoal="95%">
      <span>95%</span>
    </div>
  </div>
  <p class="progress-line-title">CSS / SCSS</p>
  <div class="progress">
    <div class="progress-bar kate-bg-warning" data-transitiongoal="80%">
      <span>80%</span>
    </div>
  </div>
  <p class="progress-line-title">JS / CoffeScript</p>
  <div class="progress">
    <div class="progress-bar kate-bg-warning" data-transitiongoal="85%">
      <span>85%</span>
    </div>
  </div>
  <p class="progress-line-title">PHP</p>
  <div class="progress">
    <div class="progress-bar kate-bg-warning" data-transitiongoal="55%">
      <span>55%</span>
    </div>
  </div>
</div>

HTML / Markup

95%

CSS / SCSS

80%

JS / CoffeScript

85%

PHP

55%

Danger color

<div class="block-progress progress-no-anim clearfix">
  <p class="progress-line-title">HTML / Markup</p>
  <div class="progress">
    <div class="progress-bar kate-bg-danger" data-transitiongoal="95%">
      <span>95%</span>
    </div>
  </div>
  <p class="progress-line-title">CSS / SCSS</p>
  <div class="progress">
    <div class="progress-bar kate-bg-danger" data-transitiongoal="80%">
      <span>80%</span>
    </div>
  </div>
  <p class="progress-line-title">JS / CoffeScript</p>
  <div class="progress">
    <div class="progress-bar kate-bg-danger" data-transitiongoal="85%">
      <span>85%</span>
    </div>
  </div>
  <p class="progress-line-title">PHP</p>
  <div class="progress">
    <div class="progress-bar kate-bg-danger" data-transitiongoal="55%">
      <span>55%</span>
    </div>
  </div>
</div>

HTML / Markup

95%

CSS / SCSS

80%

JS / CoffeScript

85%

PHP

55%

Slim

Any color / style listed above is applied to slim progress bars

Style 1

<div class="block-progress progress-parallel clearfix wow fadeIn">
    <p class="progress-line-title">HTML / Markup</p>
    <div class="progress progress-slim">
      <div class="progress-bar" data-transitiongoal="95%">
        <div class="progress-label">95%</div>
      </div>
    </div>
    <p class="progress-line-title">CSS / SCSS</p>
    <div class="progress progress-slim">
      <div class="progress-bar" data-transitiongoal="80%">
        <div class="progress-label">80%</div>
      </div>
    </div>
    <p class="progress-line-title">JS / CoffeScript</p>
    <div class="progress progress-slim">
      <div class="progress-bar" data-transitiongoal="85%">
        <div class="progress-label">85%</div>
      </div>
    </div>
    <p class="progress-line-title">PHP</p>
    <div class="progress progress-slim">
      <div class="progress-bar" data-transitiongoal="55%">
        <div class="progress-label">55%</div>
      </div>
    </div>
</div>

HTML / Markup

95%

CSS / SCSS

80%

JS / CoffeScript

85%

PHP

55%

Style 2

<div class="block-progress progress-parallel clearfix wow fadeIn">
    <p class="progress-line-title">HTML / Markup</p>
    <div class="progress progress-slim-2">
      <div class="progress-bar" data-transitiongoal="95%"></div>
      <div class="progress-label">95%</div>
    </div>
    <p class="progress-line-title">CSS / SCSS</p>
    <div class="progress progress-slim-2">
      <div class="progress-bar" data-transitiongoal="80%"></div>
      <div class="progress-label">80%</div>
    </div>
    <p class="progress-line-title">JS / CoffeScript</p>
    <div class="progress progress-slim-2">
      <div class="progress-bar" data-transitiongoal="85%"></div>
      <div class="progress-label">85%</div>
    </div>
    <p class="progress-line-title">PHP</p>
    <div class="progress progress-slim-2">
      <div class="progress-bar" data-transitiongoal="55%"></div>
      <div class="progress-label">55%</div>
    </div>
</div>

HTML / Markup

95%

CSS / SCSS

80%

JS / CoffeScript

85%

PHP

55%

Bootstrap progressbar

Contextual colors

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </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%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>
40% Complete (success)
50% Complete (info)
60% Complete (warning)
70% Complete (danger)

Stripped

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"></div>
</div>

Animated

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

Stacked

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%"></div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"></div>
  <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div>
⌃

Copyright © 2019 Kate. All Rights Reserved. 7prism