js页面加载进度条(这个就比较正式了,改改时间就完事儿)
不废话,直接上代码
思路不难,就是一个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页面加载进度条(这个就比较正式了,改改时间就完事儿)的更多相关文章
- js页面加载进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue使用nprogress页面加载进度条
vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...
- css3 linear-gradient实现页面加载进度条效果
最终效果图: html结构: <div> <p class="p1"> <span></span> < ...
- jQuery模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
- ajax页面加载进度条插件
下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...
- JS -- 异步加载进度条
今天在博客园问答里面看到博友问道怎么实现Ajax异步加载产生进度条. 很好奇就自己写了一个. 展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1. ...
- 插件二之页面加载进度条pace.js
关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...
- JS网页加载进度条
参考:http://www.cnblogs.com/timy/archive/2011/12/07/2279200.html
- 自己写的页面加载进度条jquery插件
(function ($) { var progressId = "progress" + Math.round(Math.random() * 100) var progress ...
随机推荐
- bootstrap 模版
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- DeDe调用指定栏目ID下的文章
*注: row: 调用条数 titlelen: 字数 typeid: 调用的栏目ID orderby: 按照升序对记录进行排序 idlist: 提取特定文档为空 infolen='40' 内容简介长度 ...
- CSS太阳月亮地球三角恋旋转效果
纯粹玩一下,好像没有什么实际的卵用,but,纯玩买不了上当,纯玩买不了受骗........ 地月旋转的一个css效果,无聊玩玩,可以复制到记事本试试 <!DOCTYPE html>< ...
- linux 下进程状态及进程控制
系统状态检测及进程控制1,/proc 是系统的一个窗户,可以透视内核2,建议将hosts里localhost,locahost.locadomain 解析为127.0.0.1 把系统域名解决为局域网的 ...
- Harris Corner(Harris角检测)
在做图像匹配时,常需要对两幅图像中的特征点进行匹配.为了保证匹配的准确性,所选择的特征必须有其独特性,角点可以作为一种不错的特征. 那么为什么角点有其独特性呢?角点往往是两条边缘的交点,它是两条边缘方 ...
- 这样就算会了PHP么?-1
公司有用到这些业务,多了解一下总是没错的. 现在开始一系列的PHP学习啦... <?php $boo=true; if($boo==true) echo '变量$boo为真!'; else ec ...
- KEIL简单实例
好久都没有用KEIL了,突然想动手,一时还真不知道从哪开始写,所以先弄个小实例,以便参考:#include <reg52.h> //加载包括一个52标准内核的头文件,里面主要是一些寄存器 ...
- QDialog 模态对话框与事件循环(exec其实就是调用了show和eventLoop.exec)
起源 qtcn中文论坛中有网友问到: 假设程序正常运行时,只有一个简单的窗体A,此时只有一个GUI主线程,在这个主线程中有一个事件循环处理窗体上的事件.当此程序运行到某阶段时,弹出一个模态窗体B(书上 ...
- 【转】Date类学习总结(Calendar Date 字符串 相互转换 格式化)
原文网址:http://www.blogjava.net/jerry-zhaoj/archive/2008/10/08/233228.html Date类学习总结 1.计算某一月份的最大天数 Cale ...
- libeXosip2(3-1) -- eXosip2 INVITE and Call Management
eXosip2 INVITE and Call Management SIP messages and call control API Functions int eXosip_call_set_ ...