Progress
Documentation and examples for using Gameforest custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Example
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 progress element, ensuring you can stack progress bars, animate them, and place text labels over them.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>Backgrounds
Use background utility classes to change the appearance of individual progress bars.
Uncharted: The Lost Legacy
Star Wars: Battlefront 2
Call of Duty WW2
<p class="m-b-10">Uncharted: The Lost Legacy</p>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="sr-only">80% Complete</span>
</div>
</div>
<p class="m-b-10">Star Wars: Battlefront 2</p>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
<span class="sr-only">55% Complete</span>
</div>
</div>
<p class="m-b-10">Call of Duty WW2</p>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100" style="width: 32%;">
<span class="sr-only">32% Complete</span>
</div>
</div>Loaded
Add .progress-loaded to set the loaded animation for progress bars. You can modify the loading time with jQuery script.
Star Wars: Battlefront 2
Call of Duty WW2
<div class="progress progress-loaded">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only">80% Complete</span>
</div>
</div>
<p class="m-b-10">Star Wars: Battlefront 2</p>
<div class="progress progress-loaded">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only">55% Complete</span>
</div>
</div>
<p class="m-b-10">Call of Duty WW2</p>
<div class="progress progress-loaded">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only">32% Complete</span>
</div>
</div>Sizes
We only set a height value on the .progress-bar, so if you change that value the outer .progress will automatically resize accordingly.
Uncharted: The Lost Legacy
Star Wars: Battlefront 2
Call of Duty WW2
<p class="m-b-10">Uncharted: The Lost Legacy</p>
<div class="progress progress-lg">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="sr-only">80% Complete</span>
</div>
</div>
<p class="m-b-10">Star Wars: Battlefront 2</p>
<div class="progress progress-sm">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
<span class="sr-only">55% Complete</span>
</div>
</div>
<p class="m-b-10">Call of Duty WW2</p>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100" style="width: 32%;">
<span class="sr-only">32% Complete</span>
</div>
</div>Animated
The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.
<div class="progress progress-lg">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="sr-only">80% Complete</span>
</div>
</div>