Submit your widget

Very Useful Animated Progress Bar

Created 5 years ago   Views 15439   downloads 3245    Author cssflow
Very Useful Animated Progress Bar
View DemoDownload 15.2 KB
59
Share |

This is a very useful Animated Progress Bar.

A colorful, animated progress bar that goes from red to green as it progresses.

Check out the smooth transition in the demo (width and color) — no JavaScript involved!

The html

 <section class="container">
    <input type="radio" class="radio" name="progress" value="five" id="five">
    <label for="five" class="label">5%</label>

    <input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked>
    <label for="twentyfive" class="label">25%</label>

    <input type="radio" class="radio" name="progress" value="fifty" id="fifty">
    <label for="fifty" class="label">50%</label>

    <input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
    <label for="seventyfive" class="label">75%</label>

    <input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
    <label for="onehundred" class="label">100%</label>

    <div class="progress">
      <div class="progress-bar"></div>
    </div>
  </section>

Read more:http://www.cssflow.com/snippets/animated-progress-bar