进度条制作-GIF动画

网页进度条制作

一、为什么需要网页进度条

随着HTML的普及，各种CSS3动画及特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对要慢很多，如果图片或脚本没有完全载入，用户在操作中可能发生各种问题，因此我们需要对载入数据进行检测，以更加人性化的方式给用户展现。

二、常见进度条的样式

百分比形式
旋转动画
固定在顶部的线条

三、进度条制作

加载进度条的制作，需要通过加载状态事件，才是正确的结合实际情况的做法。

需要使用的方法：

document.onreadystatechange 页面加载状态改变时的事件
document.readystate 返回文档当前的状态

状态值：

uninitialized 还未开始载入
loading 载入中
interactive 已加载，文档与用户开始交互
complete 载入完成

四、具体代码

CSS样式文件

/* 加载动画样式start */.loading {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #ffffff;}.loading .picture {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;background: url(img/loading.gif);width: 150px;height: 150px;}/* 加载动画样式end */

js文件（重要）

<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">document.onreadystatechange = function() {console.log(document.readyState)if (document.readyState == 'complete') {console.log(document.readyState, '11111111111')$('.loading').fadeOut();}}
</script>

五、步骤总结

首先，我们在 htm l文件中定义 loading 的结构；
而后，在 css 文件中书写对应的样式文件；
最后，在 js 文件中，我们使用 onreadystatechange 在时机中，我们通过判断 readyState 的值，决定隐藏 loading 结构的隐藏即可。

六、完整代码分享

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>进度条动画制作</title><style type="text/css">* {margin: 0;padding: 0;}/* 加载动画样式start */.loading {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #ffffff;}.loading .picture {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;background: url(img/loading.gif);width: 150px;height: 150px;}/* 加载动画样式end *//* 页面样式start */.container {width: 1200px;margin: 100px auto;border: 1px solid red;padding: 20px;overflow: hidden;border-radius: 10px;}.container .item {float: left;margin-bottom: 10px;}.container img {font-size: 0;vertical-align: middle;width: 300px;height: 200px;}/* 页面样式end */</style></head><body><div class="loading"><div class="picture"></div></div><!-- 注意：以下结构仅仅是为了演示页面而已 --><div class="container"><div class="item"><img src="http://pic1.win4000.com/wallpaper/2018-01-06/5a50674a7b626.jpg"></div><div class="item"><img src="http://img2.imgtn.bdimg.com/it/u=2398464402,4254570216&fm=11&gp=0.jpg"></div><div class="item"><img src="http://i0.hdslb.com/bfs/article/669b74844e47c4ca9774aad43dc62b0d879fbcd6.jpg"></div><div class="item"><img src="http://pic1.win4000.com/wallpaper/2018-06-08/5b1a448a79175.jpg"></div><div class="item"><img src="http://img0.imgtn.bdimg.com/it/u=228361023,682353921&fm=26&gp=0.jpg"></div><div class="item"><img src="http://img5.imgtn.bdimg.com/it/u=550633143,1906543664&fm=11&gp=0.jpg"></div><div class="item"><img src="http://www.wallcoo.com/flower/digital_flower_jp_03/wallpapers/1680x1050/wallcoo.com_Digital_Flower_Photo_321.jpg"></div><div class="item"><img src="http://www.wallcoo.com/nature/2009_Landscape_1680_Desktop_04/wallpapers/1680x1050/Rising%20Mist%20at%20Dawn.jpg"></div><div class="item"><img src="http://www.wallcoo.com/photograph/Fresh%20Vegetables%20by%20Isabelle%20Rozenbaum/wallpapers/1440x900/Bunch%20of%20radishes%2C%20close-up.jpg"></div><div class="item"><img src="http://img2.niutuku.com/desk/1208/2044/ntk-2044-14905.jpg"></div><div class="item"><img src="http://www.wallcoo.com/cartoon/Semafore_Calendar_Project_1920/wallpapers/1280x800/Calendar_Design_2003.04.jpg"></div><div class="item"><img src="http://www.wallcoo.com/cartoon/future_tech_background/wallpapers/1680x1050/%5Bwallcoo_com%5D_3516_future_TECH_Image.jpg"></div><div class="item"><img src="http://i1.3conline.com/images/piclib/201305/20/batch/1/176010/13690210721960gaa56pug9.jpg"></div><div class="item"><img src="http://img2.niutuku.com/desk/1207/1030/ntk119230.jpg"></div><div class="item"><img src="http://img2.niutuku.com/desk/1207/1041/ntk120340.jpg"></div><div class="item"><img src="http://g.hiphotos.baidu.com/zhidao/pic/item/6a600c338744ebf814066acedbf9d72a6159a7cf.jpg"></div><div class="item"><img src="http://pic1.win4000.com/wallpaper/3/510b709821ec1.jpg"></div><div class="item"><img src="http://download.firefox.com.cn/gfox/wallpaper/2013/06/1920x1200.jpg"></div><div class="item"><img src="http://pic9.nipic.com/20100825/668573_135507057246_2.jpg"></div><div class="item"><img src="http://pic1.win4000.com/wallpaper/a/51f1e196b5576.jpg"></div><div class="item"><img src="http://img2.imgtn.bdimg.com/it/u=3757609547,3947405383&fm=214&gp=0.jpg"></div><div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=2295877184,3273384647&fm=214&gp=0.jpg"></div><div class="item"><img src="http://i0.hdslb.com/bfs/article/9a3129c90c5da974176a74b4bbe782f1253fb8d2.jpg"></div><div class="item"><img src="http://i0.hdslb.com/bfs/article/d6d373a850c45beb250a7cbdcab1176551206740.jpg@1320w_934h.jpg"></div><div class="item"><img src="http://i0.hdslb.com/bfs/article/5350896be8e02fa2e673591380956fbf884a9e76.jpg"></div><div class="item"><img src="http://i0.hdslb.com/bfs/article/5278e12727d1ccd794a1c990905675e9b9992cce.jpg"></div><div class="item"><img src="http://img.club.pchome.net/upload/club/other/2006/6/4/nrq_1149351040.jpg"></div><div class="item"><img src="http://pic1.win4000.com/wallpaper/1/5791e7b252e81.jpg"></div>       </div></body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">document.onreadystatechange = function() {console.log(document.readyState)if (document.readyState == 'complete') {console.log(document.readyState, '11111111111')$('.loading').fadeOut();}}
</script>

进度条制作-GIF动画相关推荐

进度条制作-CSS动画
温馨提示代码参考 [本人博客]:https://blog.csdn.net/qq_41115965/article/details/83713343 代码修改不同于使用 GIF 图片,使用 CSS ...
flash进度条制作教程
[quote] 关于flash进度条制作的教程和方法挺多,经过一段时间的学习,我就其中最简单的2种制作方法做了小结,同时附上flash源文件下载,当作是flash学习笔记吧. 我认为制作flash进度 ...
Unity 3D 进度条制作
我们都知道玩游戏时,第一步要加载游戏,加载游戏时我们可以做一个简单的进度条来显示游戏加载进度,应为有了进度条,游戏画面不会过于呆板. 那么我们就开始游戏的进度条制作吧! 方法一: 1,使用NGUI制作 ...
超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...
Unity圆环进度条制作
0. 背景最近有个在Unity中制作圆环进度条的需求,并在圆中显示进度数值,类似于图1: 图1. 圆环进度条平时制作直线的进度条比较多,突然要求做个圆环的有些不适应.不过,这个需求google一下 ...
IOS贝塞尔曲线圆形进度条和加载动画
做项目让做一个加载动画,一个圈圈在转中间加一个图片,网上有好多demo,这里我也自己写了一个,中间的图片可加可不加.其中主要用到贝塞尔曲线.UIBezierPath是对CGContextRef的进一步 ...
Android 下载进度条，自定义加载进度条，loading动画
1.自定义loadingline动画 /*** 作者:created by meixi* 邮箱:13164716840@163.com* 日期:2018/9/6 10*/public class Lo ...
进度条小飞机移动动画
今天下午吃完饭就坐在电脑旁整一个进度条的动画效果,整这个效果自己也是醉了,虽然各方面都考虑到了,但是还会有点误差,因为进度条经过一个点的时候,前面半径发生变化,还要考虑到小飞机的长度问题,不能停留在圆 ...
ios弧形进度条_IOS贝塞尔曲线圆形进度条和加载动画-阿里云开发者社区
做项目让做一个加载动画,一个圈圈在转中间加一个图片,网上有好多demo,这里我也自己写了一个,中间的图片可加可不加.其中主要用到贝塞尔曲线.UIBezierPath是对CGContextRef的进一步 ...
Unity进度条制作
在制作进度条时,可先准备Image背景图片,基本UI层次结构如下图:准备空节点,取名LoadingWnd,铺满整个界面,在下面加入背景(bg).加入提示信息(TextTips)下面正式制作进度条. 1 ...

进度条制作-GIF动画

网页进度条制作

一、为什么需要网页进度条

二、常见进度条的样式

三、进度条制作

需要使用的方法：

状态值：

四、具体代码

CSS样式文件

js文件（重要）

五、步骤总结

六、完整代码分享

进度条制作-GIF动画相关推荐

最新文章

热门文章