Animated Progress Bar with Percentage Indicator – CSSProgress

Let’s showcase your skills on your website with this animated progress bar which build with CSS only. It shows the percentage values from 0 to 100 which you can easily customize from the HTML.

The layout of these skills bar is a horizontal way but if you are looking for circular layout then you can try out our previous Circular Percentage Bar tutorials which also build with CSS only.

It renders a responsive layout and works well with all kind of devices and browsers. With the help of CSS3 property keyframes, it created the animations which work as user enter to the page.

It included 13 different demos and you can pick one which you like. All the demos are a different design, It also included the stripes static and animated design.

How to use Animated Progress Bar:

Include cssprogress.min.css in your target html file and you are ready to go.

<link rel="stylesheet" href="cssprogress.min.css" />

Because we don’t need Javascript so let’s straightforward go with HTML and have a look at the basic code of progress bar.

To customize the percentage, You only need to change the value in data-percent, style width and the value inside the span tag.

<div class="cssProgress">
  <div class="progress1">
    <div class="cssProgress-bar" data-percent="75" style="width: 75%;">
      <span class="cssProgress-label">75%</span>
    </div>
  </div>
</div>

Similar, If you different color, You can add a class next to cssProgress-bar, In below code, you can see cssProgress-info class add to show the bar in purple color.

<div class="cssProgress">
  <div class="progress1">
    <div class="cssProgress-bar cssProgress-info" data-percent="65" style="width: 65%;">
      <span class="cssProgress-label">65%</span>
    </div>
  </div>
</div>

Here are the color classes which you can use.

• cssProgress-info
• cssProgress-danger
• cssProgress-success
• cssProgress-warning

There are 13 different demos and if you want to add more than one progress bars then you required to wrap the code into another extra div with class name example-1 or example-2 and so on.

<div id="example-2" class="examples">
    <div class="cssProgress">
      <div class="progress2">
        <div class="cssProgress-bar" data-percent="75" style="width: 75%;">
          <span class="cssProgress-label">75%</span>
        </div>
      </div>
    </div>
</div>

Find an example code for creating a progress bar with stripes.

<div id="example-4" class="examples">
    <div class="cssProgress">
      <div class="progress1">
        <div class="cssProgress-bar cssProgress-info cssProgress-stripes" data-percent="75" style="width: 75%;">
          <span class="cssProgress-label">75%</span>
        </div>
      </div>
    </div>
</div>

Have a look at the code example for making stripes with animation.

<div id="example-5" class="examples">
    <div class="cssProgress">
      <div class="progress1">
        <div class="cssProgress-bar cssProgress-active" data-percent="75" style="width: 75%;">
          <span class="cssProgress-label">75%</span>
        </div>
      </div>
    </div>
</div>

You can add as many types of the different designed progress bar, Just find the right code from the HTML file.