两种进度条动画的实现：

　　1、css3，但IE9-不支持。

　　2、js动画，兼容性好，但没有css3实现的顺畅

Demo：

<html>
    <head>
        <title>progress</title>
        <script type="text/javascript" src="../jQuery1.7.js"></script>
        <style type="text/css">
            body{
                margin: 0;
            }
            #progress{
                height: 2px;
                background: #b91f1f;

　　　　　　/*定义动画完成时进度条的消失500ms内完成，而不是直接消失*/
                transition: opacity 500ms linear;
            }
            #progress{

　　　　　　/*调用下面定义的progress动画，规定动画3s内完成*/
                -webkit-animation: progress 3s;
                animation: progress 3s;
            }
            #progress.done{
                opacity: 0;
            }
            @-webkit-keyframes progress{
                0%{
                    width: 0px;
                }
                100%{
                    width: 100%;
                }
            }
            @keyframes progress{
                0%{
                    width: 0px;
                }
                100%{
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <div id="progress">

</div>
        <script type="text/javascript">

　　　　// 第一次见这种使用方式，定义一个对象，并为其属性值定义动画
            $( {property : 0} ).animate( {property : 100}, {
                duration : 3000,
                step :  function(){
                    var percentage = Math.round( this.property );
                    $( "#progress" ).css( "width", percentage + "%" );
                    if( percentage == 100 ){
                        $( "#progress" ).addClass( "done" );
                    }
                }
            } );
        </script>
    </body>
</html>

css3实现进度条的模拟的更多相关文章

  1. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  2. CSS3动画进度条

    CSS3动画进度条   CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...

  3. 纯CSS3制作进度条源代码

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. 两种CSS3圆环进度条详解

    晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...

  5. layui文件上传进度条（模拟）

    1.修改上传组件js(没测) https://blog.csdn.net/weixin_42457316/article/details/81017471 https://www.cnblogs.co ...

  6. css3条纹进度条

    新建div,取名progress,如下 <div class="progress"></div> 在里面插入条纹进度条,以及进度显示文本进度: <di ...

  7. 学习 | css3实现进度条加载

    进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验. 进度条的的实现分为3大部分:1.页面布局,2.进度条动效,3.何时进度条增加. 文件目录 加载文件顺序 <link rel=& ...

  8. css3彩色进度条

    <html>    <head>        <title>progress</title>        <script type=" ...

  9. css3圈圈进度条

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

随机推荐

  1. 冲刺阶段day3

    day3 项目进展 今天周三,我们五个人难得的一整个下午都能聚在一起.首先我们对昨天的成果一一地查看了一遍,并且坐出了修改.后面的时间则是做出 登录界面的窗体,完善了登录界面的代码,并且实现了其与数据 ...

  2. 从源代码的角度聊聊java中StringBuffer、StringBuilder、String中的字符串拼接

    长久以来,我们被教导字符串的连接最好用StringBuffer.StringBuilder,但是我们却不知道这两者之间的区别.跟字符串相关的一些方法中总是有CharSequence.StringBuf ...

  3. [外挂4] 用CE查找棋盘基址

    a.找棋盘数据基址 b.分析棋盘数据结构 综合使用搜索技巧,这要看你的聪明才智啦! [如本例:首先精确查找0,然后点一下左上角的一个,再次筛选出变化的,重开盘,再搜变化的,发现期盼规律为值为0表示没有 ...

  4. paip.微信菜单直接跳转url和获取openid流程总结

    paip.微信菜单直接跳转url和获取openid流程总结   #------不能直接跳转,贝儿提示不安全的链接.. #-------使用auth跳转. //todox 直接转到..  direct ...

  5. paip.抓取网页内容--java php python

    paip.抓取网页内容--java php python.txt 作者Attilax  艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog ...

  6. LDR 和 ADR 彻底详解

    0.什么是位指令? 答:伪指令(Pseudo instruction)是用于告诉汇编程序如何进行汇编的指令.它既不控制机器的操作也不被汇编成机器代码, 只能为汇编程序所识别并指导汇编如何进行. 1.L ...

  7. 深入学习系列--Data Structure--02字符串

    字符串可以说是我们实际工作中使用最多的数据类型了,常见的字符串操作包括链接.取子串.格式化等.这部分内容总体来说比较容易理解,最难的部分要数字符串的模式匹配方法了,尤其是KMP算法,需要通过实践加以记 ...

  8. 利用Mongodb的复制集搭建高可用分片，Replica Sets + Sharding的搭建过程

    参考资料 reference:  http://mongodb.blog.51cto.com/1071559/740131  http://docs.mongodb.org/manual/tutori ...

  9. Clojure上手

    Clojure,这是什么鬼?一门基于JVM(现在也有基于.NET CLR的了:Clojure CLR) 的函数式编程语言.在JVM平台运行的时候,会被编译为JVM的字节码进行运算..为什么要学它?其设 ...

  10. [算法导论]迪克斯特拉算法 @ Python

    class Graph: def __init__(self): self.V = [] self.w = {} class Vertex: def __init__(self, x): self.k ...