【css系列】创建网页加载进度条
一、最简单或者明显的方式是使用定时器
1、在网页中加入布局覆盖真实网页内容
2、使用定时器确定加载所用时间的长短，其实并不是真正的加载进度实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器的进度条</title>
<script src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
setInterval(function () {
$(".loading").fadeOut();
},3000)
})
</script>
<style type="text/css">
.loading{
width: 100%;
height: 100%;
position: fixed;
top:0;
left:0;
z-index: 100;
background-color: white;
}
.loading .pic{
width: 64px;
height: 64px;
border: 1px solid red;
background: url("./image/35.gif");
position: absolute;
top:0;
bottom: 0;
left: 0;
right:0;
margin: auto; }
</style>
</head>
<body>
<div class="loading">
<div class="pic"></div>
</div>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2374531200,2817019640&fm=11&gp=0.jpg" alt=""/>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1019761374,1197310851&fm=26&gp=0.jpg"/>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1091681404,1813447708&fm=26&gp=0.jpg">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4039520080,1420114353&fm=26&gp=0.jpg"/>
</body>
</html>
二、在第一版中做改良
1、理论上还是使用定时器
2、覆盖的内容不在布局中定义而是动态加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器的进度条</title>
<script src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
var loading = '<div class="loading"><div class="pic"></div></div>';
$("body").append(loading);
setInterval(function () {
$(".loading").fadeOut();
},3000)
})
</script>
<style type="text/css">
.loading{
width: 100%;
height: 100%;
position: fixed;
top:0;
left:0;
z-index: 100;
background-color: white;
}
.loading .pic{
width: 64px;
height: 64px;
border: 1px solid red;
background: url("./image/35.gif");
position: absolute;
top:0;
bottom: 0;
left: 0;
right:0;
margin: auto; }
</style>
</head>
<body>
<div class="loading">
<div class="pic"></div>
</div>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2374531200,2817019640&fm=11&gp=0.jpg" alt=""/>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1019761374,1197310851&fm=26&gp=0.jpg"/>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1091681404,1813447708&fm=26&gp=0.jpg">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4039520080,1420114353&fm=26&gp=0.jpg"/>
</body>
</html>
三、通过加载状态实现进度条
document.onreadystatechange 页面加载状态改变时的事件
document.readyState 返回当前文档的状态
uninitialized:还未开始载入
loading:载入中
interactive已加载。文档与用户可以开始交互
complete:载入完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
.loading{
width: 100%;
height: 100%;
position: fixed;
top:0;
left:0;
z-index: 100;
background-color: white;
}
.loading .pic{
width: 64px;
height: 64px;
border: 1px solid red;
background: url("./image/35.gif");
position: absolute;
top:0;
bottom: 0;
left: 0;
right:0;
margin: auto; }
</style>
<script src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
document.onreadystatechange = function () {
console.log(document.readyState);
if(document.readyState=='complete'){
$(".loading").fadeOut();
}
}
</script>
</head>
<body>
<div class="loading">
<div class="pic"></div>
</div>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2374531200,2817019640&fm=11&gp=0.jpg" alt=""/>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1019761374,1197310851&fm=26&gp=0.jpg"/>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1091681404,1813447708&fm=26&gp=0.jpg">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4039520080,1420114353&fm=26&gp=0.jpg"/>
</body>
</html>
四、使用css创建进度条动画
1、我们可以在https://loading.io/网站上生成css动画图或者获得动画的css样式自己使用
2、我们可以在https://autoprefixer.github.io/?中自动做css的兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3创建动画</title>
<style type="text/css">
.loading{
width: 100%;
height: 100%;
position: fixed;
top:0;
left:0;
z-index: 100;
background-color: white;
}
.loading .pic{
width: 50px;
height: 50px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right:0;
margin: auto; }
.loading .pic i{
display: block;
float: left;
width: 6px;
height: 50px;
background: #399;
margin: 0 2px;
-webkit-transform: scaleY(0.4);
-ms-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-animation: load 1.2s infinite;
animation: load 1.2s infinite;
}
.loading .pic i:nth-child(1){ }
.loading .pic i:nth-child(2){
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loading .pic i:nth-child(3){
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading .pic i:nth-child(4){
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loading .pic i:nth-child(5){
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-webkit-keyframes load {
0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
20%{-webkit-transform: scaleY(1);transform: scaleY(1)}
}
@keyframes load {
0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
20%{-webkit-transform: scaleY(1);transform: scaleY(1)}
}
</style>
<script src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
document.onreadystatechange = function () {
if(document.readyState == "complete"){
$(".loading").fadeOut();
}
}
</script>
</head>
<body>
<div class="loading">
<div class="pic">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2374531200,2817019640&fm=11&gp=0.jpg" alt=""/>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1019761374,1197310851&fm=26&gp=0.jpg"/>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1091681404,1813447708&fm=26&gp=0.jpg">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4039520080,1420114353&fm=26&gp=0.jpg"/>
</body>
</html>
【css系列】创建网页加载进度条的更多相关文章
- 用document.readyState实现网页加载进度条
概述 之前以为给网页设置加载进度条很麻烦,今天一学真是超级简单,记录下来供以后开发时参考,相信对其他人也有用. readyState 主要运用了document.readyState和nprogres ...
- HTML5 CSS3 诱人的实例 ： 网页加载进度条的实现，下载进度条等
今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...
- iOS WKWebView添加网页加载进度条(转)
一.效果展示 WKWebProgressViewDemo.gif 二.主要步骤 1.添加UIProgressView属性 @property (nonatomic, strong) WKWebView ...
- Jquery网页加载进度条（随笔，当然要随便写，当日记动态心情写咯）
首先先是吐槽时间... 告诉大家一个好消息,就是有个妹子非常仰慕我的前端技术说要包养我 然后有好多羡慕嫉妒恨的童鞋一定要说,少年你太天真了,那一定是HR 然后我表示她不是HR,本宅的春天貌似要到来了. ...
- jQuery网页加载进度条插件
jquery.pace.js会自动监测你的Ajax请求,事件循环滞后,记录您的页面上准备状态和元素来决定的进度情况. 将pace.js和主题css的添加到您的网页! pace.js会自动监测你的Aja ...
- JS网页加载进度条
参考:http://www.cnblogs.com/timy/archive/2011/12/07/2279200.html
- 混合开发（一）——WebView开发高级技巧之加载网页以及JavaScript，加载进度条
混合开发(一)--WebView开发高级技巧之加载网页以及JavaScript,加载进度条 现在关于混合开发也越来越多了,很多人喜欢跟随,比如HB,比如RN,其实这东西很早就有这么一个概念了,而且说实 ...
- pace.js – 网页自动加载进度条插件
网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
随机推荐
- Can't read [proguard.ClassPathEntry@1a0c10f] (No such file or directory)
//该错误无法识别,是因为你使用了旧版本的proguard,建议你下载新版本4.5以上的proguard来替代Android SDK中使用的旧版sdcard 这样你就可以知道错误所在.因为只有4.5版 ...
- linux升级php至5.6
1 查看终端当前php版本 php -v 会反馈以下信息: PHP 5.4.35 (cli) (built: Nov 14 2014 07:04:10) Copyright (c) 1997-2014 ...
- JAVA构造方法与方法是啥意思，方法重载方法覆盖俗谈
构造函数跟构造方法是一样的,只是称呼不同; C语言里叫函数,Java里叫方法. 成员方法必须有返回类型即使是没有返回,也要写上void 构造方法没有返回类型,而且和类名一样!一个类里面,一看就知道了譬 ...
- css 手机适配
手淘H5移动端适配方案flexible源码分析 移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看 ...
- vue加百度统计代码（亲测有效）
申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到一个问 ...
- Linux安装bundle
安装bundle文件的方法: cd 到文件目录再用sudo chmod +x XXXXXXX.bundle 加权限最后 ./XXXXXXXX.bundle 就行了. 第一步:sudo chmod +x ...
- Strict Mode (JavaScript)
摘要: ECMAScript5中引入的严格模式,通过让JavaScript运行环境对一些开发过程中最常见和不易发现的错误做出和当前不同的处理,来让开发者拥有一个”更好”的JavaScript语言.但目 ...
- 【scala】 scala 类 （五）
1.scala类 1.class 关键字 2.var 属性 默认生成getter/setter 方法 3.val 属性 默认生成getter 方法 4. 自定义getter /setter 方法 , ...
- 手机APP支付--整合支付宝支付控件
长话短说,本文根据支付宝官方说明文档,简单总结下,并且说明下开发过程碰到的问题以及该如何解决. 整合步骤: 1 登录商家服务网站,下载开发包,地址:https://b.alipay.com/order ...
- jQuery Colorbox弹窗插件使用教程小结、属性设置详解以及colorbox关闭
jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,当然我主要是用来弹出图片啦. jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax ...