Progress Bar

it is a progression bar that use to see the progress.

Example #

progress bar examples with variant of success, warning, and danger.

<h6>defaults</h6>
<div class="n-progress">
<div class="n-progress-bar" style="width: 100%" />
</div>
<h6>success</h6>
<div class="n-progress">
<div class="n-progress-bar n-success" style="width: 60%" />
</div>
<h6>warning</h6>
<div class="n-progress">
<div class="n-progress-bar n-warning" style="width: 30%" />
</div>
<h6>danger</h6>
<div class="n-progress">
<div class="n-progress-bar n-danger" style="width: 90%" />
</div>
default

success

warning

danger
Progress bar with percentage #

you can also show the percentage by adding a attribute data-percentage="60%" on .n-progress-bar class.

<h6>default</h6>
<div class="n-progress">
<div class="n-progress-bar" data-percentage="100%" style="width: 100%" />
</div>
<h6>success</h6>
<div class="n-progress">
<div class="n-progress-bar n-success" data-percentage="60%" style="width: 60%" />
</div>
<h6>warning</h6>
<div class="n-progress">
<div class="n-progress-bar n-warning" data-percentage="30%" style="width: 30%" />
</div>
<h6>danger</h6>
<div class="n-progress">
<div class="n-progress-bar n-danger" data-percentage="90%" style="width: 90%" />
</div>

default


success


warning


danger
Warning!

In this pre-deployed stage, most of the library you will witness has yet been publish or update in npm.