(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插件的更多相关文章

  1. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  2. js页面加载进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. vue使用nprogress页面加载进度条

    vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...

  4. jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

  5. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

  6. js页面加载进度条(这个就比较正式了,改改时间就完事儿)

    不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...

  7. 插件二之页面加载进度条pace.js

    关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...

  8. element admin中使用nprogress实现页面加载进度条

    主要是知道是nprogress这个组件实现的就可以了,组件的使用方法可参考:https://blog.csdn.net/ltr15036900300/article/details/47321217 ...

  9. 【原生JS插件】LoadingBar页面顶部加载进度条

    先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...

随机推荐

  1. java中如何设置HTTP协议的头信息(header)

    首先,我们先看一下http的头信息到底是什么:HTTP(HyperTextTransferProtocol) 即超文本传输协议,目前网页传输的的通用协议.HTTP协议采用了请求/响应模型,浏览器或其他 ...

  2. django+xadmin在线教育平台(二)

    老话总是没错的,工欲善其事,必先利其器 教你安装pycharm,mysql,navicat,python相关环境. windows下搭建开发环境 2-1 pycharm,mysql,Navicat安装 ...

  3. oracle for update和for update nowait 的区别

    原文地址:http://www.cnblogs.com/quanweiru/archive/2012/11/09/2762223.html 1.for update 和 for update nowa ...

  4. LCS及方案数(DP)

    Description 对于一个序列

  5. Spring加载配置文件的几种方法(org.springframework.beans.factory.BeanDefinitionStoreException)

    一:Spring中的几种容器都支持使用xml装配bean,包括:XmlBeanFactory ,ClassPathXmlApplicationContext ,FileSystemXmlApplica ...

  6. TCP/IP网络编程之I/O流分离

    分离I/O流 “分离I/O流”是一种常用表达,有I/O工具可以区分二者.无论使用何种办法,都可以认为分离I/O流.我们之前通过两种方法分离I/O流,第一种是TCP/IP网络编程之进程间通信中的“TCP ...

  7. SPFA - Luogu 3385 【模板】负环

    [模板]负环 描述 找负环 输入 第一行一个正整数T表示数据组数,对于每组数据: 第一行两个正整数N M,表示图有N个顶点,M条边 接下来M行,每行三个整数a b w,表示a->b有一条权值为w ...

  8. WPF控件开发(2) 自动完成(AutoComplete)-1

    自动完成功能使用范围很广,多以TextBox或ComboBox的形式出现,在输入的同时给予候选词,候选词一般有两种方式获取. 一种类似Baidu,Google,Bing之类的搜索引擎所用的直接给予前十 ...

  9. python re 模块小结

    前言: 本人环境windows 7 64位,python2.7 re是什么: regular expression缩写,意为正则表达式,是python的众多模块之一 re用途: 从文本中有选择的批量抽 ...

  10. pb8.0 mssqlserver 新建数据库连接问题

    将ntwdblib.DLL复制到Sybase\Shared\PowerBuilder目录下 unable to load the requested database interface,无法创建数据 ...