不废话，直接上代码

思路不难，就是一个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. Android退出程序

    public class ExitApplication extends Application { private static ExitApplication instance ; List< ...

  2. vi编辑器经典技巧 -备

    a)vi编辑器 (visual Interface简称) Linux常用,输出,删除,查找,替换,块操作,定制 b) vim编辑器 (vi IMproved简写)是vi增强版本,在vi上增加了很多功能 ...

  3. 『信息收集』GoogleHacking快速定位目标网站

    第一次接触到“GoogleHacking”是在学校初次Geek大赛上. 很有意思的一道题目,网页中原题大致是这样的: 下面是数学之美(吴军著)的封面,请找出这本书的ISBN码(这一关的Key值) 很不 ...

  4. Light OJ 1314 Names for Babies

    http://www.lightoj.com/volume_showproblem.php?problem=1314 题意:给定一个串和p,q,求长度在p到q之间的子串有几种 思路:后缀数组,对于每个 ...

  5. Java Thread Status(转)

    public static enum Thread.State  extends Enum<Thread.State>线程状态.线程可以处于下列状态之一: 1.NEW 至今尚未启动的线程的 ...

  6. windows7环境下 硬盘安装ubuntu 12.04 server版

    之前一直用windows7环境下的虚拟机装的操作系统,但有时候在切换系统时老是死机,还是装一个硬盘版的ubuntu 12.04 server吧 先说一下本人的环境吧:windows 7 32位专业版+ ...

  7. Best Cow Line (POJ 3617)

    题目: 给定长度为N的字符串S,要构造一个长度为N的字符串T.起初,T是一个空串,随后反复进行下列任意操作. ·从S的头部删除一个字符,加到T的尾部 ·从S的尾部删除一个字符,加到T的尾部 目标是要构 ...

  8. 线性时间构造普吕弗(Prüfer)序列

    tree -> sequence 首先预处理数组 deg[N], deg[i]表示编号为i的节点的度数,我们每次要删除的节点肯定是 满足deg[i]=1 的编号最小节点, 首先找到所有叶子并选出 ...

  9. Linux 内存管理知识学习总结

    现在的服务器大部分都是运行在Linux上面的,所以,作为一个程序员有必要简单地了解一下系统是如何运行的.对于内存部分需要知道: 地址映射 内存管理的方式 缺页异常 先来看一些基本的知识,在进程看来,内 ...

  10. c语言0 ‘0’ '\0'空格都是什么玩意儿

    void main() { ; '; printf("\n%d,%c",ch,ch);//按照%d就是求编号,按照字符 printf("\n[%d],[%c]" ...