bootstrap彩色斑马进度条

所属分类:UI-加载

 1454  10  查看评论 (3)
bootstrap彩色斑马进度条 ie兼容8

简要教程

这是一款基于Bootstrap制作的超酷彩色斑马线条纹进度条设计效果。该进度条动画特效通过简单的CSS3 animation动画来完成,整个进度条设计时尚大方。

使用方法

在页面中引入bootstrap.css文件。

<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">

HTML结构

该Bootstrap进度条的HTML结构如下。

<div class="container">
  <div class="row">
      <div class="col-md-offset-3 col-md-6">
          <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 class="progress">
              <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 75%;">
                  <div class="progress-value">75%</div>
              </div>
          </div>
 
          <div class="progress">
              <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 90%;">
                  <div class="progress-value">90%</div>
              </div>
          </div>
 
          <div class="progress">
              <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 60%;">
                  <div class="progress-value">60%</div>
              </div>
          </div>
      </div>
  </div>
</div>

CSS样式

为该Bootstrap进度条添加如下的CSS样式。

.demo{
    padding: 2em 0;
    background: linear-gradient(to right, #2c3b4e, #4a688a, #2c3b4e);
}
.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 .progress-bar{
    border-radius: 20px;
    position: relative;
    animation: animate-positive 2s;
}
.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 .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; }
}


相关插件-加载

简单的JavaScript图像延迟加载库Echo.js

和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库,可独立使用。并且 Echo.js 非常小巧,压缩后不足 1KB。
  加载
 23611  79

EasyLazyload.js 超好用js图片延迟加载

超简单图片延迟加载js插件
  加载
 2394  45

HTML5 SVG轻量级jQuery进度条插件

这是一款基于HTML5 SVG的轻量级jQuery进度条插件。该进度条插件使用简单,它提供了一些基本的参数来控制进度条的外观和动画,是一款非常实用的进度条插件。
  加载
 4293  19

jQuery简单进度条插件

jQuery简单实用的轻量级进度条插件
  加载
 6748  35

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    Sorl0
    2016/12/21 11:12:01

    说好的兼容ie8呢?

    回复
    亚伯拉罕0
    2016/11/28 14:11:26
    貌似不支持移动端的...?
        谎言花开0
        2016/12/1 14:12:57
        我这里移动端测试没有问题的
    回复
取消回复
    PROMULGATOR

    wanghao022

    山东省济南市