Animated Progress Bar Component With Pure CSS

Preview:

Description:

A CSS only solution that make it easier to render responsive, CSS3 animated, Bootstrap-like progress bars on your webpage.

How to use it:

To get started, just include the cssProgress.css into the head section of the document and we’re ready to go.

<link rel="stylesheet" href="cssProgress.css">

Create a basic progress bar.

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

Create a progress bar with rounded borders.

<div class="cssProgress">
  <div class="progress2">
    <div class="cssProgress-bar" data-percent="75">
      <span class="cssProgress-label">75%</span> 
    </div>
  </div>
</div>

Create a progress bar with a custom background.

<div class="cssProgress">
  <div class="progress3">
    <div class="cssProgress-bar" data-percent="75"> 
      <span class="cssProgress-label">75%</span> 
    </div>
  </div>
</div>

Create a progress bar with stripes.

<div class="cssProgress">
  <div class="progress1">
    <div class="cssProgress-bar cssProgress-info cssProgress-stripes" data-percent="75"> 
      <span class="cssProgress-label">75%</span> 
    </div>
  </div>
</div>

Create a progress bar with animated stripes.

<div class="cssProgress">
  <div class="progress1">
    <div class="cssProgress-bar cssProgress-active" data-percent="75"> 
      <span class="cssProgress-label">75%</span> 
    </div>
  </div>
</div>