自己写的页面加载进度条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上 ...
随机推荐
- kubernetes搭建dashboard报错
warningconfigmaps is forbidden: User "system:serviceaccount:kube-system:kubernetes-dashboard&qu ...
- JZOJ 5775. 【NOIP2008模拟】农夫约的假期
5775. [NOIP2008模拟]农夫约的假期 (File IO): input:shuru.in output:shuru.out Time Limits: 1000 ms Memory Lim ...
- django实现事务
1.导入模块 from django.db import transaction 2.使用方法 with transaction.atomic(): User.objects.create(name= ...
- kubernetes中使用ServiceAccount创建kubectl config 文件
在kubernetes 为不同的项目创建了不同的SerivceAccount,那么如何通过ServiceAccount创建 kubectl config文件呢?使用下面脚本即可 # your serv ...
- U10783 名字被和谐了
U10783 名字被和谐了 题目背景 众所周知,我们称g是a的约数,当且仅当g是正数且a mod g = 0. 众所周知,若g既是a的约数也是b的约数,我们称g是a.b的一个公约数. 众所周知,a.b ...
- cf975d Ghosts
ref #include <algorithm> #include <iostream> #include <cstdio> #include <map> ...
- IOS开发---菜鸟学习之路--(八)-实现新闻页面
本章将具体讲述如何结合前两张的内容最终实现一个新闻页面的雏形 之所以称之为雏形,是因为本章实现的内容只是实现了最基础的效果 还有很多其他诸如下拉刷新 页面导航等效果都需要投入一些时间进行研究 好了直接 ...
- 【Triangle 】cpp
题目: Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjace ...
- quagga源码学习--BGP协议创建对等体
现有的路由协议都是通过分布式协议逐个配置协商运行的,协议协议,一个就不需要协议咯,至少2个才能够协议着做事情嘛,不过呢,这样就出现网元过多配置困难的问题,对网管软件要求也越来越高, SDN或许可能改变 ...
- phpstrom换行的一个小坑
安装phpstrom后汉化会默认不是左边定格换行,而是会智能换行 苦找了许久了,终于知道在哪设置了,跟大家分享一下,希望不要走同样的坑 不勾选即可