两种进度条动画的实现:

  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彩色进度条

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

  7. css3圈圈进度条

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

  8. css3实现进度条

    HTML 结构很简单,但不是 Single Element: <div class="spinner"><i></i></div> ...

  9. [CSS3]环形进度条

    来源:https://codepen.io/eZ0/pen/eZXNzd 点击上面链接有源码有示例. .ko-progress-circle { width: 120px; height: 120px ...

随机推荐

  1. samba服务器安装,共享nginx目录

    Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件,类似于win的网上邻居,让windows和linux实现文件共享 1.安装smaba服务 yum install samba ...

  2. DEDECMS之八 漏洞错误和疑难杂症

    1.dedecms文章加粗b属性后出现strong或者b标签修改 dedecms的文章,如果设置了加粗的属性后,文章标题那会自动添加一个strong或者是b标签,如何去掉呢,方法如下: a.更改自动添 ...

  3. Deleting backup_label on restore will corrupt your database!

    The quick summary of this issue is that the backup_label file is an integral part of your database c ...

  4. 可以考虑使用SublimeText编辑器替代notepad++了

    大概是去年吧,这款编辑器神一般的出现在我面前,经过我小心翼翼的试用后发现并不是那么太顺手,插件配置都不太成熟,如Package Control. 最喜欢用它的zencoding还得专门开个小窗:ang ...

  5. 怎么知道RTL Schematic中的instance与哪段代码对应呢

    2013-06-23 20:15:47 ISE综合后可以看到RTL Schematic,但我们知道在RTL编码时,要经常问自己一个问题“我写的这段代码会综合成什么样的电路呢”.对于一个简单的设计,比如 ...

  6. mybatis15 mapper方式 代码

    UserMapper.java package cn.itcast.mybatis.mapper; import java.util.List; import cn.itcast.mybatis.po ...

  7. 新建PCH文件以及常用宏定义

    $(SRCROOT)/项目名/pch文件名.pch //0-255的随机数 #define randint arc4random() % 256 //随机色 #define randColor [UI ...

  8. JavaScript中函数function fun(){}和 var fun=function(){}的区别

    function fun(){} 和 var fun=function(){}的区别 标题有点长···· 废话少说,其实他们的主要区别就是"函数声明的提前行为". var fun= ...

  9. Java语法基础(1)

    Java语法基础(1) 1.      Java是一门跨平台(也就是跨操作系统)语言,其跨平台的本质是借助java虚拟机 (也就是JVM(java virtual mechinal))进行跨平台使用. ...

  10. Docker Compose 安装 on centos7

    本文演示如何在CentOS7上安装Docker Compose. 1 在线安装 1.1 下载安装包 $ curl -L https://github.com/docker/compose/releas ...