web前端动态添加进度条
来源:互联网 发布:淘宝查号网址 编辑:程序博客网 时间:2024/05/20 15:37
为了网络延迟加载或者为了防止提交后重复点击提交按钮,比较好的方式就是显示一个比较优雅的进度条
源码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>进度条</title> <style> *{ padding: 0; margin: 0; } .loading{ width: 100%; height: 100%; background: #ffffff; opacity: 0.5; left: 0; top:0; position: fixed; z-index: 100; } .loading .pic{ width: 100px; height: 100px; position: absolute; left: 0; top:0; bottom: 0; right: 0; margin: auto; text-align: center; font-size: 20px; line-height: 100px; } </style> <script src="js/jquery.js"></script> <script> document.onreadystatechange=function () { if ("interactive"==document.readyState){ var ahtml="<div class='loading'> <div class='pic'> <img src='images/loading.svg' width='80px' height='80px' ><br/><b >"+jjj+"</b></div></div>" ; $("body").append(ahtml); }else if ("complete"==document.readyState){ $(".loading").fadeOut(100); } }; </script></head><body> <div> <img src="images/loading_1.png"> <img src="images/loading_2.png"> <img src="images/loading_3.png"> </div></body></html>
可以自己调整css样式实现多种多样的进度条样式
可以将上面的js代码封装到common.js,可以在做网络请求的时候做相应的显隐操作
/** * 显示进度条 * @param msg 进度条下面显示的内容 */function showLoading(msg) { var ahtml="<div class='loading'> <div class='pic'> <img src='image/loading.svg' width='80px' height='80px' ><br>"+msg+"</div></div>" ; $("body").append(ahtml);}/** * 隐藏进度条 */function hiddleLoading() { $(".loading").fadeOut(100);}
loading.svg文件如下(css):
<svg class="lds-spinner" width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(0 50 50)"> <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000"> <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate> </rect></g><g transform="rotate(30 50 50)"> <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000"> <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate> </rect></g><g transform="rotate(60 50 50)"> <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000"> <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate> </rect></g><g transform="rotate(90 50 50)"> <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000"> <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate> </rect></g><g transform="rotate(120 50 50)"> <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000"> <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate> </rect></g><g transform="rotate(150 50 50)"> <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000"> <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate> </rect></g><g transform="rotate(180 50 50)"> <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000"> <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate> </rect></g><g transform="rotate(210 50 50)"> <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000"> <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate> </rect></g><g transform="rotate(240 50 50)"> <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000"> <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate> </rect></g><g transform="rotate(270 50 50)"> <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000"> <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate> </rect></g><g transform="rotate(300 50 50)"> <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000"> <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate> </rect></g><g transform="rotate(330 50 50)"> <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#000000"> <animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate> </rect></g></svg>
推荐一个找进度条资源的网站:https://preloaders.net/
阅读全文
0 0
- web前端动态添加进度条
- web前端之添加过滤器
- 动态添加web控件
- Web动态添加控件
- 动态添加web控件
- 动态添加web引用
- .net WEB加载时添加进度条实例
- 为Web文件上传添加进度条
- web前端,jquery实现瀑布流总结7,jq动态添加div等元素
- Web前端优雅的显示网络请求进度条
- Delphi编程中在状态栏动态添加进度条
- delphi编程中在状态栏动态添加进度条
- Web前端开发学习2:动态网页
- Web前端开发学习2:动态网页
- WEB前端-JS-动态购物页面V1
- iOS-仿支付宝加载web网页添加进度条
- 动态进度条
- 动态进度条
- simple traditional layout in html(use table)
- 2款风格QPushButton
- FTPrep, 100 Same Tree
- 【Codeforces 868 B. Race Against Time】& 模拟
- mybatis-generator 代码自动生成工具(maven方式)
- web前端动态添加进度条
- 必须了解的一些IT知识点
- SSL默认有5年的限制
- 源表测量准确度Accurracy(以Keithley 4200为例)
- Construct2游戏制作入门教程
- 未能加载文件或程序集“**”或它的某一个依赖项,系统找不到指定的文件
- 总结自己Python环境配置过程和碰到的问题
- leetcode 326. Power of Three(C语言,一行代码解决,两种方法)24
- 学习Docker(2017-10-5)