不废话，直接上代码

思路不难，就是一个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. ubuntu下安装pyqt5

    在网上看了很多ubuntu系统中安装pyqt5,感觉有些麻烦. 主要的库只有一个:python3-pyqt5 可通过新立得安装,也可通过shell命令安装 sudo apt-get install p ...

  2. Activiti工作流学习-----基于5.19.0版本(3)

    前面关于eventType的属性值的配置简单的说了一下,activiti支持的值如下表所示:这是我摘抄的activiti官网的 Event 的名字 描述 Event的类名 ENGINE_CREATED ...

  3. ssm+jsp+自定义标签实现分页，可以通用（后端实现）

    从controller到mapper.xml的后端实现 只梳理分页相关代码 1 controller里面相关 ModelAndView mv = new ModelAndView("/lis ...

  4. 减少芯片失效：芯片焊接（die Attach）工艺优化

    在器件的生产过程中,芯片焊接是封装过程中的重点控制工序.此工艺的目的是将芯片通过融化的合金焊料粘结在引线框架上,使芯片的集电极与引线框架的散热片形成良好的欧姆接触和散热通路.由于固体表面的复杂性和粘结 ...

  5. 读书笔记：java特种兵（上）

    ----看着样章,感觉还不错,就买下来了,书先不论好坏,悟到了一个道理,东西没有好与坏,只有适不适合. 第一章:想了解编译器是如何优化程序的,当年的编译原理没有学好啊

  6. （2.1）servlet线程安全问题

    本文参考链接:http://www.yesky.com/334/1951334.shtml 摘 要:介绍了Servlet多线程机制,通过一个实例并结合Java 的内存模型说明引起Servlet线程不安 ...

  7. 什么是空间复杂度（What is actually Space Complexity ?）

    属于空间复杂度(Space Complexity)在很多情况下被错认为是附属空间(Auxiliary Space),下面是附属空间和空间复杂度的定义. 附属空间(Auxiliary Space)是算法 ...

  8. You don't have permission to access / on this server for debian_8

    Forbidden You don't have permission to access / on this server. Apache/2.4.10 (Debian) Server at www ...

  9. hdu 2254 奥运

    点击打开hdu 2254 思路: 矩阵乘法 分析: 1 题目给定一个有向图,要求t1-t2天内v1-v2的路径的个数 2 根据离散数学里面的可达矩阵的性质,我们知道一个有向图的邻接矩阵的前n次幂的和即 ...

  10. Gwt ListBox选中自动触发事件

    以前用TreeView显示,需求更改 需要做一个ListBox控件显示数据,和HTML中的<Select>标签一样 编辑时候自动触发选中的数据子类: 1.只要自动触发了rootListBo ...