Code Blender

An atomic Middleman partials library

Progres bar

  2. Molecule
  3. Progres bar

Cross-browser compatibility

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

Default

33% 
= codeBlender "progress-bar", "molecule", { array: [ width: 33 ] }

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

Attributes

33% 
= codeBlender "progress-bar", "molecule", { array: [ animated: :true,
                                     context:  "success",
                                     striped:  :true,
                                     width:    33 ] }

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

Low Percentage Shows label

2% 
= codeBlender "progress-bar", "molecule", { array: [ animated: :true,
                                     context:  "warning",
                                     label:    true,
                                     width:    2 ] }

<div class='progress'>
<div aria-valuemax='100' aria-valuemin='0' aria-valuenow='2' class='active progress-bar progress-bar-warning' role='progressbar' style='width:2%'>
<span>
2%
</span>
</div>
</div>

Stacked Multiple bars into the same Progress

33%
33% 
= codeBlender "progress-bar", "molecule", { array: [ { animated: :true,
                                       context:  "warning",
                                       label:    true,
                                       width:    33 },
                                     { animated: :true,
                                       context:  "success",
                                       label:    false,
                                       striped:  :true,
                                       width:    33 } ] }

<div class='progress'>
<div aria-valuemax='100' aria-valuemin='0' aria-valuenow='33' class='active progress-bar progress-bar-warning' role='progressbar' style='width:33%'>
<span>
33%
</span>
</div>
<div aria-valuemax='100' aria-valuemin='0' aria-valuenow='33' class='active progress-bar progress-bar-striped progress-bar-success' role='progressbar' style='width:33%'>
<span class='sr-only'>
33%
</span>
</div>
</div>

Resources Useful websites and tutorials

Title URL
Bootstrap Progress Bar http://getbootstrap.com/components/#progress