不废话，直接上代码

思路不难，就是一个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. .net转php laraval框架学习系列（四） 项目实战---View

    laravel的参考文档中view的讲解有些简单. 在实际项目开发中view的灵活性其实是非常大. 首先来看看laravel中的布局页 和asp.net mvc中有什么不同 <!DOCTYPE ...

  2. destoon实现调用当前栏目分类及子分类和三级分类的方法

    调用当前栏目分类及子分类和三级分类是程序设计里常用的方法,本文就来详细讲述destoon实现调用当前栏目分类及子分类和三级分类的方法.具体操作如下: 在destoon中提供了如下的调用语句: 一级分类 ...

  3. git新手碰到的各种奇葩问题之一

    git  操作错误: <1>.情景描述:当在git commit --amend 更新上一次提交时,而此时提交日志会跳转到别人的日志中.,会出现错误:如下 弥补操作: 1.git fetc ...

  4. 请转到http://zhuangyongyao.com

    个人博客搬迁到http://zhuangyongyao.com.

  5. get top k elements of the same key in hive

    key points: 1. group by key and sort by using distribute by and sort by. 2. get top k elements by a ...

  6. 自制单片机之十五……可串行驱动LCD12864的应用

    在网上搜了一下,ST7920控制器的LCD产品可以提供8位,4位并行和串行接口可选,并行的控制接口的LCD较多,前面的贴子也介绍过,我们在这儿不说了,这儿我们讲的是串口控制LCD12864. 买了块S ...

  7. 关于IoAttachDeviceToDeviceStack

    IoAttachDeviceToDeviceStack将Source Device附加到Target Device上. 打开windbgkd> u IoAttachDeviceToDeviceS ...

  8. 【转】精简深拷贝ArrayList实例

    原文网址:http://gghhgame51333.blog.51cto.com/138362/289383 精简深拷贝ArrayList实例(包括递归和序列化方法) 2007-07-12 16:50 ...

  9. dictionary (key-value) (map容器)

    #dictionary可以保存不同类型的值 menu = {'fish0':14.50} list = [] menu['fish1'] = 10.1 # Adding new key-value p ...

  10. Spring的工作原理核心组件和应用

    Spring框架 Spring 是管理多个java类的容器框架,注意是类不管理接口. Spring 的主要功能 Ioc 反转控制和 DI 依赖注入. 注入的方式可以是构造函数赋值也可以是 set方法赋 ...