css3 进度条 

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3彩色进度条加载动画DEMO演示</title>

  <style type="text/css">

    /*外层进度条区域*/
    .progress{
      height: 25px;
      background: #262626;
      padding: 5px;
      overflow: visible;
      border-radius: 20px;
      border-top: 1px solid #000;
      border-bottom: 1px solid #7992a8;
      margin-top: 50px;
    }

    /*前进-进度条区域*/
    .progress-bar {
      float: left;
      width: 0;
      height: 100%;
      font-size: 12px;
      line-height: 20px;
      color: #fff;
      text-align: center;
      background-color: #337ab7;
      -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
      -webkit-transition: width .6s ease;
      -o-transition: width .6s ease;
      transition: width .6s ease
    }

   /*设置动画*/
    .progress .progress-bar{
      border-radius: 20px;
      position: relative;
      animation: animate-positive 2s;
    }

    .progress-bar.active{
      animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
    }
    @-webkit-keyframes animate-positive{
      0% { width: 0; }
    }
    @keyframes animate-positive{
      0% { width: 0; }
    }

    @-webkit-keyframes progress-bar-stripes {
      from {
        background-position: 40px 0
      }
      to {
        background-position: 0 0
      }
    }


    @keyframes progress-bar-stripes {
      from {
        background-position: 40px 0
      }
      to {
        background-position: 0 0
      }
    }

    /*上边提示进度数字样式*/
    .progress .progress-value{
      display: block;
      padding: 3px 7px;
      font-size: 13px;
      color: #fff;
      border-radius: 4px;
      background: #191919;
      border: 1px solid #000;
      position: absolute;
      top: -40px;
      right: -10px;
    }

    /*进度条背景样式*/
    .progress-striped .progress-bar, .progress-bar-striped {
      background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
      -webkit-background-size: 40px 40px;
      background-size: 40px 40px
    }

    /*背景执行动画*/
    .progress.active .progress-bar, .progress-bar.active {
      -webkit-animation: progress-bar-stripes 2s linear infinite;
      -o-animation: progress-bar-stripes 2s linear infinite;
      animation: progress-bar-stripes 2s linear infinite
    }
    /**/
    .progress .progress-value:after{
      content: "";
      border-top: 10px solid #191919;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      position: absolute;
      bottom: -6px;
      left: 26%;
    }

.progress-bar.active{
  animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
}
@-webkit-keyframes animate-positive{
  0% { width: 0; }
}
@keyframes animate-positive{
  0% { width: 0; }
}


  </style>
</head>
<body>
<div class="demo">
  <div class="container">
    <div class="row">
        <div class="progress">
          <div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 85%;">
            <div class="progress-value">85%</div>
          </div>
        </div>

  </div>
</div>
</div>

</body>
</html>

 

 

转载地址

下载示例

 

posted on 2017-09-15 13:15  Mc525  阅读(157)  评论(0)    收藏  举报

导航