自己写的页面加载进度条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上 ...
随机推荐
- 【前端_js】Chrome禁止缓存的方法
在前端开发中,浏览器缓存使得我们改了代码后页面不变,得经常手动清理缓存. 1.按如下操作即可禁用浏览器缓存, 这种方法基本能够做到完全禁止缓存,然而缺点是必须要将开发模式一直打开,占用屏幕空间.而且, ...
- Ubuntu16.04 hadoop 伪分布式 的文件配置
首先需要完成java环境的配置,这里就省略了. 完成 hadoop 伪分布(pesudo distribution),只需配置下面 五 个文件即可: hadoop-env.sh core-site.x ...
- ASP.NET Core模块化前后端分离快速开发框架介绍之1、开篇
源码地址 GitHub:https://github.com/iamoldli/NetModular 演示地址 地址:https://nm.iamoldli.com 账户:admin 密码:admin ...
- Python读取内容UnicodeDecodeError错误
1.错误现象 环境:Python3.7 描述: 用open方法获取文件句柄: 用read/readlines方法一次读取文件所有内容: 尝试了编码GB2312/GBK/GB18030/UTF-8,发现 ...
- C++构造函数实例——拷贝构造,赋值
#define _CRT_SECURE_NO_WARNINGS //windows系统 #include <iostream> #include <cstdlib> #incl ...
- SpringMVC controller接收的中文参数乱码
CharacterEncodingFilter只对POST请求有用,GET请求的需要对你运行的tomcat 目录conf/server.xml文件中<Connector connectionTi ...
- Android拨打电话不弹出系统拨号界面总结
我在网上搜了一下,解决这个问题,有两种方式: 1.反射调用系统底层方法,并获取系统权限 反射调用的代码如下: Class phoneFactoryClass = Class.forName(" ...
- HDU 1535 S-Nim(SG函数)
S-Nim Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- day39---mysql基础三
1.索引: 字典得目录,便于数据查找. 原理:将列信息存储在其相关的文件,这些信息使用便于检索的方式如B-tree.哈希来存储 索引的分类: 普通所有:name,只能帮助查找 唯一索引:name,帮助 ...
- Java之基于Apache jar包的FTPClient上传
首先,准备工作: http://pan.baidu.com/s/1dD1Utwt 从以上链接下载Apache的jar包,并将其复制到工程的WEB-INF下的lib包里,在此,准备工作就已经完成了. 具 ...