Progress Component

Native HTML progress bars customized with a single class and different colors.


Default
<progress class="e-progress" value="37" max="100"></progress>
With Shadow
<progress class="e-progress shadow-6" value="50" max="100"></progress>
Colors



















<progress class="e-progress" value="15" max="100"></progress>
<progress class="e-progress primary" value="25" max="100"></progress>
<progress class="e-progress success" value="35" max="100"></progress>
<progress class="e-progress danger" value="45" max="100"></progress>
<progress class="e-progress warning" value="55" max="100"></progress>
<progress class="e-progress sky" value="65" max="100"></progress>
<progress class="e-progress purple" value="75" max="100"></progress>
<progress class="e-progress gray" value="85" max="100"></progress>
<progress class="e-progress dark" value="95" max="100"></progress>
<progress class="e-progress black" value="100" max="100"></progress>
Change sizes

Progress bars only have one size but you can change it by directly styling a style.


<progress class="e-progress" value="75" max="100" style="height:2px;"></progress>
<progress class="e-progress" value="75" max="100" style="height:25px;"></progress>
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron