移动web相册——css3进度条

1.介绍

因项目中上传作品和web相册都需要上传,都需要用到进度条,进度条的实现可以用Falsh，图片，javascript，但这里我是在移动端使用,所以重点介绍css3的实现方法。

2.代码展示

/*外层box*/
        .progress_box{
          height: 10px;
          width:200px;
          border-radius: 5px;
          background-color:#ececec;
        }
        /* 动画 */
        @-webkit-keyframes progressbar { 
            from {
                width:0
            }
            to {
                width:100%
            }
        }
        /* Standard syntax */
        @keyframes progressbar {
            from {
                width:0
            }
            to {
                width:100%
            }
        }
        /*普通进度条*/
        .bar1{
            height:10px;
            background:#4fd0bc;
            width:0;
            border-radius:5px;
            -webkit-transition:width .10s ease;
            transition:width .10s ease;
            -webkit-animation:progressbar 10s infinite both;
            animation:progressbar 10s infinite both;
            /*这里为了演示-webkit-animation-iteration-count设置为infinite*/
        }
        /*条纹进度条*/
        .bar2{
            width:0;
            height:10px;
            background:#4fd0bc;
            border-radius:5px;
            background-image:linear-gradient(-45deg,rgba(255,255,255,.5) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.6)       50%,rgba(255,255,255,.6) 75%,transparent 75%,transparent);
            -webkit-transition:width .10s ease;
            transition:width .10s ease;
            -webkit-animation:progressbar 10s infinite both;
            animation:progressbar 10s infinite both;
        }

 

3.普通进度条

<div class="progress_box">
<div class="bar1"></div>
</div>

 

4.条纹进度条

<div class="progress_box">
<div class="bar2"></div>
</div>

 

5.html5实现进度条

上面的两种方式都是使用div包裹，来实现的,但html5提供的一个新的属性,不用嵌套包裹,一个属性就搞定;

(1) progress

progress 元素属于html5的新属性,ie9(包括ie9)不支持

(2)基本属性：

1.max 指最大值。若缺省，进度值范围从0.0~1.0，如果设置成max=100,则进度值范围从0~100

2. value 进程的当前值

(3)默认效果如下：

(4)修改默认样式，实现如上效果：

.pgs {
    width: 200px;
    border: 1px solid #ccc;  
    background-color:#ececec;
    border-radius: 5px;
    height: 10px;
    border:none;
}
progress::-webkit-progress-bar { 
    background-color:#ececec;
    border-radius: 5px;
}
progress::-webkit-progress-value{ 
    background: #4fd0bc; 
    border-radius: 5px;
}

 

<progress value="50" max="100" class="pgs"></progress>

 

这里根据上传进度,直接修改value值就ok了$("progress").val(precent);