不废话，直接上代码

思路不难，就是一个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. 学习如何写PHP MVC框架（1） -- 路由

    说到PHP开发web,自然离不开开发框架,开发框架为我们提供了灵活的开发方式,MVC层分离,业务解耦等... 第一篇先来简单点的,说说MVC框架的路由功能... 一般的单入口框架路由都是这样的结构: ...

  2. jQuery Lazy Load 图片延迟加载

    基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...

  3. Canvas -画图

    2014-09-30 09:14:57 <!doctype html> <html> <head> <title> </title> < ...

  4. libevent入门（1）

    libevent是什么                libevent 库实际上没有更换 select().poll() 或其他机制的基础.而是使用对于每个平台最高效的高性能解决方案在实现外加上一个包 ...

  5. 如果通过adb查看当前显示的activity

    通过adb 查看最上层成activity名字: linux: adb shell dumpsys activity | grep "mFocusedActivity" window ...

  6. C语言---volatile（我的工程笔记本）

    一般说来,volatile用在如下的几个地方: 1.中断服务程序中修改的供其它程序检测的变量需要加volatile: 2.多任务环境下各任务间共享的标志应该加volatile: 3.存储器映射的硬件寄 ...

  7. Cisco Anyconnect Secure Mobility Client

    Backup 进入安装文件目录cd anyconnect-3.1.00495/binary 安装sudo./vpnsetup.sh 查看安装情况ps aux  |  grep  cisco 在搜索中, ...

  8. vga|9针串口|网口测试方法

    VGA口的测试: 1.什么是VGA口,干什么用的??? 视频数据传输线,传输视频信号的 2.VGA口的接法?? 两变都为公头的接法:最笨的办法,脚对脚,15根线全连起来 3.VGA的内部接法?? 4. ...

  9. 复制文件时，如何显示进度条（使用TFileStream一点一点读，或者使用BlockRead）

    procedure mycopyfile(sourcef,targetf:string;i:integer); var FromF,ToF:file; NumRead,NumWritten:Integ ...

  10. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...