两种进度条动画的实现：

　　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. 尝试在Mac上编译DNX

    自从XRE改名为DNX至今,从来没有在Mac OS X上成功编译过DNX.一直很纳闷,难道DNX的开发人员不用Mac?今天突然明白了,DNX的开发人员真的不用Mac.而且DNX用的2个持续集成服务Ap ...

  2. 用word-break: break-all解决不正确换行问题

    这个在新闻频道存在已久的问题,今天终于把它给解决了! 问题是这样的,当一段文字中有比较长的链接地址,会造成链接地址之前的文字不能正确换行,效果如下: 对应的html代码如下: <p> 如图 ...

  3. Kotlin & Vertx 构建web服务

    感想 Kotlin 是一门好语言,值得大家了解一下. Vertx 是一个好框架,也值得大家了解一下. Kotlin 写过js,也写过一点点go,主力一直是java.用了kotlin,貌似找到了常用语言 ...

  4. ORACLE修改用户表所属表空间的步骤

    ORACLE修改用户表所属表空间的步骤 使用脚本进行修改.据目前所了解,正长情况下需要修改表的空间和表的索引的空间,如果涉及到BOLB字段的表,修改的方式又不一样了!正常情况下的修改脚本:1.修改表的 ...

  5. 51单片机-PC数据传输 温度 距离 监控系统设计

    >_<:功能概述: 通过串口PC和单片机通信,可以询问单片机测得的温度,可以询问声呐测距的测量距离,同时把测量温度显示在数码管上. >_<:PC部分 这里com.cpp和com ...

  6. JsRender实用教程(tag else使用、循环嵌套访问父级数据)

    前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: ·  简单直观 ·  功能强大 ·  可扩展的 ·  快如闪电 这些特性看起来很厉害,但几乎每个模版引擎, ...

  7. C#与数据库访问技术总结（十六）之 DataSet对象

    DataSet对象 DataSet对象可以用来存储从数据库查询到的数据结果,由于它在获得数据或更新数据后立即与数据库断开,所以程序员能用此高效地访问和操作数据库. 并且,由于DataSet对象具有离线 ...

  8. SSL双向认证java实现(转)

    本文通过模拟场景,介绍SSL双向认证的java实现 默认的情况下,我认为读者已经对SSL原理有一定的了解,所以文章中对SSL的原理,不做详细的介绍. 如果有这个需要,那么通过GOOGLE,可以搜索到很 ...

  9. java 数据类型

    java是一个静态类型的语言,所有的数据类型都是有类型的(强类型的语言),当一个变量名指定类型后不可再改变变量类型 数据类型包括基本数据类型和引用数据类型(除基本数据类型外的其他类型都是引用数据类型) ...

  10. paip.utf-8，unicode编码的本质输出unicode文件原理 python

    paip.utf-8,unicode编码的本质输出unicode文件原理 python      #别的语言,java php都是unicode,走十python不一样.    #enddef  #t ...