不废话，直接上代码

思路不难，就是一个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. 乱七八糟 Nodejs 系列一：试水

    看Nodejs比较舒服的人,个人认为主要是: 以前是后端,转成前端的人: 前端巨牛的人: 后端巨牛的人: 巨牛的人... 当然还有我这种,脑抽不止的人~~ 不过学习的过程中发现,如果不是上来就用exp ...

  2. Apache主站点配置

    Apache的配置由httpd.conf文件配置,因此下面的配置指令都是在httpd.conf文件中修改. Apache主站点基本配置:ServerRoot "/mnt/software/a ...

  3. 使用POI把Word Excel转为HTML

    此方法是针对Office2003的,但是word中如果有图片,图片能够解析出来但是HTML文件中不显示.也不支持excel中的图片解析. 所需jar包如下如下: 1:PoiUtil.java pack ...

  4. C8051F学习笔记：单片机的驱动能力

    学习51单片机的时候我们就知道51单片机的I/O口的特点:P0口没有弱上拉,所以做地址线时不用上拉,但输出“1”时就要加上拉电阻,不然输出电平到不了高电平,P1~P3则不存在这个问题,每个输出管脚都有 ...

  5. codility上的问题 （23）Chi 2012

    这个题也比较有意思.意思是给定一个数组A,长度为M,里面都是正整数,代表每块地形的高度.现在要测试一种加农炮,给定一个炮弹的高度H, 如果存在最小的I,满足0 < I <  M,满足A[I ...

  6. 传智播客8月C/C++基础班开班

     秋天已经向我们走来,在这个充满收获的季节里,大家齐聚传智C/C++学院这个大家庭,无论你曾经从事什么工作,都拥有着一颗热爱C/C++的心,为了自己心中的梦想,大家要付出百倍的努力,要做到&quo ...

  7. 哲学家用餐问题的几个解法（c语言实现）

    参考资料: 1.维基百科:哲学家用餐问题 2.Windows的多线程编程

  8. centos6.4安装Vmware exsi CLI

    1,Vmware官网Exsi CLI下载链接 https://download2.vmware.com/software/sdk/VMware-vSphere-CLI-4.1.0-254719.x86 ...

  9. 合天网安实验室学习笔记----Linux基础

    一.Linux的发展 linux kernel的版本是:2.6.32-279.el6.x86_64,此格式为:主版本.次版本.释出版本-修改版本 次版本为奇数:测试版: 次版本为偶数:稳定版: Lin ...

  10. 第23讲 UI_布局 之相对布局

    第23讲 UI_布局 之相对布局 .RelativeLayout(相对布局): RelativeLayout(相对布局)是指组件的位置总是相对兄弟组件.父容器来决定的(相对位置),如某个组件的左边右边 ...