Basic CSS Progress Bar with Percentage

Category: Loading | April 5, 2019
CSS Progress Bar with Percentage
Author: Arjun Amgain
Official Page: Go to Website
Last Update:April 5, 2019
License:MIT

Looking for a clean coded progress bar? This is a CSS progress bar with percentage value which easies to customize. All you need to change the value in HTML and you are done.

Just a few lines of CSS code required to build it. It’s responsive and works on mobile too. It is a basic skill bar without having any animations but you can implement animation on progress bar by using CSS3 keyframe properties.

It displays a percentage of progress of skils out of 100. If you want to achieve fast loading speed on your site which is an important factor nowdays —- This progress bar is a better option for this purpose.

The aim of making this progress bar to keep the code as minimal as possible.

How to Create a Percentage CSS Progress Bar

Only a file require to add is style.css which you can find in a downloadable source to get started with making CSS progress bar.

<link rel="stylesheet" type="text/css" href="style.css" />

There are only three things driving these progress bars are an outer container element with the .progress class and an inner element with .progress-barclass and inline style style="width: __%" where the “__” signifies a number under 100.

The third thing is a <span> tag containing the optional text. The default background color will be orange by default.

<div class="progress progress-striped">
  <div class="progress-bar" style="width: 40%">
    <span>40% Complete </span>
  </div>
</div>

Percentage

The percentage value can easily change by changing the width inline style of the .progress-bar class div.

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-green" style="width: 50%">
    <span>50% Complete </span>
  </div>
</div>

Color

You can add the additional class .progress-bar-blue to any progress bar to make it in a different color.

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-blue" style="width: 60%">
    <span>60% Complete </span>
  </div>
</div>

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.