自己写的页面加载进度条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上 ...
随机推荐
- Python 正则表达式 匹配次数
管道可以匹配多个正则表达式中的一个 >>> >>> m=re.search(r'Batman|Tina Fey','Batman and Tina Fey')> ...
- 科学计算库Numpy——数组形状
改变数组维数 给数组的shape属性赋值,改变数组的维数.数组的大小是不能改变的. 增加维度 使用np.newaxis增加维度. 删除维度 使用squeeze()删除维度是1的维度,也就是删除shap ...
- Reachability from the Capital
题目描述 There are nn cities and mm roads in Berland. Each road connects a pair of cities. The roads in ...
- linux centos6 系统优化脚本-经典
转载一篇Ricky的系统优化脚本,这个脚本只能针对centos6x 其他还没有测试,但centos7肯定不行的 #!/bin/bash # ID 201510192126 # Author Ricky ...
- Android 获取地理位置信息 封装好了 直接用
前言:花了一个早上研究了以下android获取经纬度,然后网上的参考资料都是杂七杂八,基本上都是过去几年的,现在我用 android6.0参照别人的结果发生好多错误,我的内心几乎是崩溃的.后来,不断百 ...
- mysql之处理金钱小数点后的多余0
问题产生原因:我们在做基金项目 产生大量的金钱 在GP首页展示首页信息的时候要求去除多余的0 由于我们在数据库设计的时候查询返回数据 例如18.100000 这种形式 而我们需要将多余的0 ...
- XX公司在线笔试题编程题之一
题目: #include <iostream> #include <vector> #include <string> #include <list> ...
- luogu3224 [HNOI2012]永无乡
线段树合并好写好调,隔壁老王的treap+启发式合并难写难调 #include <iostream> #include <cstdio> using namespace std ...
- WebApp开发技巧
http://www.cnblogs.com/WhiteCusp/p/4502961.html http://ju.outofmemory.cn/entry/25675 http://www.fron ...
- c++ primer plus 第6版 部分三 9章 - 章
c++ primer plus 第6版 部分三 9章 - 章 第9章 内存模型和名称空间 1.单独编译 ...