纯css3进度条动画效果

当前位置:主页 > CSS3库 > CSS3动画 > 纯css3进度条动画效果
纯css3进度条动画效果
分享:

    插件介绍

    一款使用纯css3制作的进度条动画效果。进度条在前进时不同的刻度可以设置不同的颜色,是一款效果非常酷的进度条动画。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-16
    阅读:

简要教程

这是一个非常有用的css3进度条动画效果。

这个彩色的进度条动画效果在增加刻度时颜色从红色渐变到绿色,效果非常不错。它使用纯css制作,没有使用任何的javascript。

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>
                

更多详细信息请参看:http://www.cssflow.com/snippets/animated-progress-bar