(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. 关于 composer 的一些坑

    发布自己的『包.库』至 https://packagist.org 却一直不能引入 网络上所有关于新建composer包的教程文章统统只提到了版本可能会影响无法 require 深深的坑哭了我们这些入 ...

  2. Python_day01_作业笔记

    内容大纲: 1. python的出生与应用以及历史, python2x: 源码冗余,源码重复,源码不规范. python3x: 源码清晰优美简单.   2. python的种类. Cpython: 官 ...

  3. 用python给图片添加半透明水印

    # coding:utf-8 from PIL import Image, ImageDraw, ImageFont def add_text_to_image(image, text): font ...

  4. 用django实现邮件发送

    settings配置 EMAIL_HOST = 'smtp.qq.com' # 如果是163换成stmp.163.com EMAIL_PORT = 465 # qq邮箱的端口 EMAIL_HOST_U ...

  5. eeeeeeeeeee

    http://58.241.123.38/hot.cdn.baidupcs.com/file/91623e76f776475da9c3223cdac861f0?xcode=68983c005f6e3c ...

  6. 3 View视图 URLconf

    1.视图 视图接受Web请求并且返回Web响应 视图就是一个python函数,被定义在views.py中 响应可以是一张网页的HTML内容,一个重定向,一个404错误等等 响应处理过程如下图: 2 准 ...

  7. cogs:1619. [HEOI2012]采花/luogu P2056

    1619. [HEOI2012]采花 ★★☆   输入文件:1flower.in   输出文件:1flower.out   简单对比时间限制:5 s   内存限制:128 MB [题目描述] 萧薰儿是 ...

  8. 自我介绍&友链

    目录 此博客 我是谁? 友链 此博客 此博客主要更新一些题解什么的...(随缘啦) 本蒟蒻太菜了,博客中出现了错误希望指出,谢谢! . . 我是谁? SD的一名蒟蒻!emm... 喜欢摸鱼. 喜欢抽卡 ...

  9. 5个最佳的Android测试框架(带示例)

    谷歌的Android生态系统正在不断地迅速扩张.有证据表明,新的移动OEM正在攻陷世界的每一个角落,不同的屏幕尺寸.ROM /固件.芯片组以及等等等等,层出不穷.于是乎,对于Android开发人员而言 ...

  10. MySQL != 失效

    字段中包含 NULL 和 其他字符串值时, 字段既包含 NULL 也有字符串类型的值, 使用如下 SQL 无法获取值为 NULL 的部分 SELECT * FROM table_name WHERE ...