两种进度条动画的实现:

  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. CSS3动画进度条

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

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

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

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

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

  4. css3彩色进度条

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

  5. css3圈圈进度条

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

  6. css3实现进度条

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

  7. 分享9款极具创意的HTML5/CSS3进度条动画

    1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...

  8. 9款极具创意的HTML5/CSS3进度条动画(免积分下载)

    尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...

  9. CSS3实现圆形进度条

    介绍 闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条.粗略看了下代码,发现原理其实很简单,不难理解. 现在在此讲述下原理并实现一个1s更新的进度条. 技术细节 ...

随机推荐

  1. Win8 Metro动态加载内容框架

    制作背景 为了参加ImagineCup 2013 世界公民类比赛,我们设计制作了一个可动态扩展的幼教类App.这个App需要能动态加载内容,内容包括带动画可交互的电子书,动画,视频,游戏. 技术支持 ...

  2. Mac版PhpStorm之XAMPP整合apache服务器配置

    版权声明:本文为博主原创文章,未经博主允许不得转载. 选择在PhpStorm集成apache服务器,下面是我自己的亲测的步骤. 1.如何修改apache默认端口 xampp apache默认的http ...

  3. Ural 1010. Discrete Function

    1010. Discrete Function Time limit: 1.0 secondMemory limit: 64 MB There is a discrete function. It i ...

  4. js 事件大全

    Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...

  5. (译) Conditional Variational Autoencoders 条件式变换自编码机

    Conditional Variational Autoencoders --- 条件式变换自编码机 Goal of a Variational Autoencoder: 一个 VAE(variati ...

  6. Sql Server之旅——第九站 看公司这些DBA们设计的这些复合索引

    这一篇再说下索引的最后一个主题,索引覆盖,当然学习比较好的捷径是看看那些大师们设计的索引,看从中能提取些什么营养的东西,下面我们看 看数据库中一个核心的Orders表. 一:查看表的架构 <1& ...

  7. Win7 Object_Header之TypeIndex解析

    在暴力搜索内存进程对象反隐藏进程这篇文章中,我们提到: Object Header偏移0×008处Type成员为对象类型值,相同类型的对象具有相同的值.  自Window  7开始, _OBJECT_ ...

  8. CMSIS OS None

    /* ---------------------------------------------------------------------- * Copyright (C) 2011 ARM L ...

  9. 嵌套 click 第二层 click会叠加 导致 触发 多次

    $("#appearHiddenDiv").click(function(){ $("#hiddenDiv").css({display:"block ...

  10. angular $apply()以及$digest()讲解1

    一些知名的批评和缺陷.他们都涉及到$digest loop(更新周期)中一个很常见的问题:如何在Angular之外更新$scope? 在哪调用 $apply? 更佳的做法是确保你是在$digest l ...