两种进度条动画的实现：

　　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. IIS 7.5 + asp.net MVC4 设置路由处理URL请求

    使用asp.net MVC4开发的网站,在本地的VS012环境下运行,一切正常.但当发布到Windows 2008 R2(IIS7.5 + Framework4.5)上时,访问相关网页时,出现有下面的 ...

  2. [汇编] 从键盘输入一个一位数字，然后响铃n声

    ; multi-segment executable file template. data segment ends stack segment dw dup() ends code segment ...

  3. paip.mysql 批量kill 连接.

    paip.mysql 批量kill 连接. 作者Attilax  艾龙,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net ...

  4. bzoj 2295: 【POJ Challenge】我爱你啊

    2295: [POJ Challenge]我爱你啊 Time Limit: 1 Sec  Memory Limit: 128 MB Description ftiasch是个十分受女生欢迎的同学,所以 ...

  5. arcgis server账号需要设置地图缓存的访问权限

    如果gis服务起不来,那么可以看看arcgis server账号有没有设置地图缓存的访问权限,有可能arcgis server账号没有这个文件夹的访问权限.  本文用菊子曰发布

  6. 冒泡算法应用(坐标Y值降序X值升序)

    今天有个客户需求是有一坐标数组,希望按Y值降序X值升序排列,我临时写了个算法.先写个坐标类: class XYZ {     public XYZ() { }     public XYZ(doubl ...

  7. ASP.NET Web API的安全管道

    本篇体验ASP.NET Web API的安全管道.这里的安全管道是指在请求和响应过程中所经历的各个组件或进程,比如有IIS,HttpModule,OWIN,WebAPI,等等.在这个管道中大致分两个阶 ...

  8. 关于H.264 x264 h264 AVC1

    1. H.264是MPEG4的第十部分,是一个标准.对头,国际上两个视频专家组(VCEG和MPEG)合作提出的标准,两个专家组各有各的叫法,所以既叫H.264,也叫AVC. 2.x264是一个编码器, ...

  9. JavaMail发送邮件时判断发送结果1.5.x

    经常有用户在平台乱注册帐号,系统得自动清理.现在要判断一下邮件是否正确少了很多垃圾注册用户了. 测试 http://sms.reyo.cn/user/register 感谢您的反溃信息!!! 程序代码 ...

  10. jquery实现返回基部案例效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...