自己写的页面加载进度条jquery插件
(function ($) {
var progressId = "progress" + Math.round(Math.random() * 100)
var progress = "<div id='" + progressId + "' style='background: green;height:10px;position: fixed;left:0;top:0;'></div>"
progressId = "#" + progressId
$("body").append(progress);
console.log($(progressId).attr("outHTML"))
var i = 0;
var id = window.setInterval(function () {
i = i + 5;
console.log(i)
$(progressId).animate({"width": i + "%"})
if (i == 80) {
clearInterval(id)
}
}, 100)
window.onload = function () {
window.clearInterval(id)
$(progressId).animate({"width": "100%"})
setTimeout(function(){
$(progressId).hide();
},1000)
}
})($)
自己写的页面加载进度条jquery插件的更多相关文章
- css3 linear-gradient实现页面加载进度条效果
最终效果图: html结构: <div> <p class="p1"> <span></span> < ...
- 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: ...
- jQuery模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
- ajax页面加载进度条插件
下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...
- js页面加载进度条(这个就比较正式了,改改时间就完事儿)
不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...
- 插件二之页面加载进度条pace.js
关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...
- element admin中使用nprogress实现页面加载进度条
主要是知道是nprogress这个组件实现的就可以了,组件的使用方法可参考:https://blog.csdn.net/ltr15036900300/article/details/47321217 ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
随机推荐
- mysql 绿色版 安装
1.下载mysql的绿色版压缩包.(自行百度) 2.自行规划目录解压 3.安装 注意:我遇到的两种版本的安装方法(暂时按照解压后的目录中是否含有data目录来区分) 3.1 无data目录(我用到的的 ...
- java中equals和==的区别详解
java中的数据类型,可分为两类: 1.基本数据类型. byte,short,char,int,long,float,double,boolean这八大原始数据类型他们之间的比较,使用“==”,比较的 ...
- 四、Shell 数组
Shell 数组 数组中可以存放多个值.Bash Shell 只支持一维数组(不支持多维数组),初始化时不需要定义数组大小(与 PHP 类似). 与大部分编程语言类似,数组元素的下标由0开始. She ...
- 3.Cisco Packet Tracer中关于交换机端口安全的设置
本次实验将在这幅拓扑图的基础上完成 我们会对pc0在交换机上进行mac地址绑定,pc1访问时则交换机断开端口 1.为pc机配置ip地址 pc0:192.168.1.1 pc1:192.168.1.2 ...
- PHP静态文件缓存
ob_start(); 2 echo 'aaa'; 3 $string = ob_get_contents(); 4 file_put_contents('a.html', $string); 5 o ...
- PHP消息队列学习
在我们平常网站设计时,会遇到“给用户群发短信”,“商城订单系统大批量订单处理”,“商城秒杀活动”等需求,这些功能,都有一个共同的特点:就是在面对高迸发的同时,必须要保证系统处理数据的有效性.那么如何处 ...
- 05.VUE学习之表达式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- linux批量替换
sed -i "s/李三/李四/g" -r result/* 将result文件夹下的所有文件中的李三替换成李四 sed命令下批量替换文件内容 格式: sed -i ...
- python标准模块
sys模块 这是一个跟python解释器关系密切的标准库.它提供了一些和python解释器操作密切的属性和函数. sys中常用的函数和属性: sys.argv: sys.argv是专门用来向pytho ...
- 网络流 EK算法模板。
这篇博客讲得很好 #include<queue> #include<stdio.h> #include<string.h> using namespace std; ...