不废话，直接上代码

思路不难，就是一个animate方法配合随机数

duration内个三秒钟，是自定义的，可以改成页面加载时间，这样就完美了

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script src="js/jquery-1.8.3.min.js"></script>

<style>

body { margin: 0; }

#progress { position: fixed; height: 2px; background: #2085c5; transition: opacity 500ms linear }

#progress.done { opacity: 0 }

#progress span { position: absolute; height: 2px; -webkit-box-shadow: #2085c5 1px 0 6px 1px; -webkit-border-radius: 100%; opacity: 1; width: 150px; right: -10px; -webkit-animation: pulse 2s ease-out 0s infinite; }

@-webkit-keyframes pulse {  30% {

 opacity:.6

}

 60% {

 opacity:0;

}

 100% {

 opacity:.6

}

}

</style>

</head>

<body>

<div id="progress"><span></span></div>

<script>

$({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>

js页面加载进度条(这个就比较正式了，改改时间就完事儿)的更多相关文章

  1. js页面加载进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. vue使用nprogress页面加载进度条

    vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...

  3. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  4. jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

  5. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

  6. JS -- 异步加载进度条

    今天在博客园问答里面看到博友问道怎么实现Ajax异步加载产生进度条. 很好奇就自己写了一个. 展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1. ...

  7. 插件二之页面加载进度条pace.js

    关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...

  8. JS网页加载进度条

    参考:http://www.cnblogs.com/timy/archive/2011/12/07/2279200.html

  9. 自己写的页面加载进度条jquery插件

    (function ($) { var progressId = "progress" + Math.round(Math.random() * 100) var progress ...

随机推荐

  1. XML DOM 遍历Xml文档

    1.xml文档内容: <?xml version="1.0" encoding="utf-8" ?> <bookstore> <b ...

  2. STL string常用操作指令

    s.insert(pos,args); 在pos之前插入args指定的字符.pos可以是一个下标或一个迭代器.接受下标的版本返回一个指向s的引用;接受迭代器的版本返回指向第一个插入字符的迭代器. s. ...

  3. layout_gravity与gravity的区别

    1:android:gravity 这个是针对控件里的元素来说的,用来控制元素在该控件里的显示位置. 2:android:layout_gravity 这个是针对控件本身而言,用来控制该控件在包含该控 ...

  4. hdu Free DIY Tour

    http://acm.hdu.edu.cn/showproblem.php?pid=1224 #include <cstdio> #include <cstring> #inc ...

  5. PHP安装OPENSSL扩展模块

    新项目上线时,PHP开发同事反映邮件功能不能正常使用. 原来是用465的SMTP加密端口,不是25端口.那要为当前的PHP安装OPENSSL扩展啦. 还好,网上有很多,弄一个过来就搞定. http:/ ...

  6. Codeforces 159D Palindrome pairs

    http://codeforces.com/problemset/problem/159/D 题目大意: 给出一个字符串,求取这个字符串中互相不覆盖的两个回文子串的对数. 思路:num[i]代表左端点 ...

  7. coalesce和nvl函数

    coalesce 函数 : Oracle COALESCE函数语法为COALESCE(表达式1,表达式2,...,表达式n),n>=2,此表达式的功能为返回第一个不为空的表达式,如果 都为空则返 ...

  8. 转：ASP.Net MVC：校验、AJAX与过滤器

    原文地址:http://blog.jobbole.com/85005/ 一.校验 — 表单不是你想提想提就能提 1.1 DataAnnotations(数据注解) 位于 System.Componen ...

  9. 黑马程序员_Java基本数据类型对象包装类

    基本数据类型对象包装类 byte Byte short Short int Integer long Long boolean Boolean float Float double Double ch ...

  10. Query语句对系统性能的影响

    需求: 取出某个group(假设id为1)下的用户编号id,用户昵称(nick_name),并按照加入组的时间(user_group.gmt_create)来进行倒序排列,取出前20个 解决方案一: ...