【HTML】简单实现网页加载动画

效果：

进入网页时先出现加载动画，加载完毕后显示网页

实现原理：

在html上方放一个div，用来显示加载动画，js判断加载完毕事件，将div隐藏即可。

知识点整理：

伪元素实现垂直居中、awesome字体动画、js判断HTML加载是否完成

代码：

css:

body {width: 100%;height: 100%;overflow: hidden;}.loading-div {width: 1800px;height: 720px;background-color: #fff;display: table-cell;vertical-align: middle;color: #555;overflow: hidden;text-align: center;}.loading-div::before {display: inline-block;vertical-align: middle;}

html

<div class="loading-div"><i class="fa fa-spinner fa-pulse fa-3x fa-fw "></i><span class="sr-only">Loading...</span></div><div class="main">这里是网页内容</div>

//注释部分是设置2秒的定时延迟，timeout结束后加载网页//setTimeout(() => {// $(".loading-div").hide();//$('body').css('overflow-y','scroll');// }, 2000);
//这是根据js判断，页面加载完毕就显示
document.onreadystatechange = function () {if (document.readyState == "complete") {    $(".loading-div").hide();$('body').css('overflow','scroll');}}

在线引用文件：

<script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" rel="stylesheet">

【HTML】简单实现网页加载动画相关推荐

简单实现网页加载动画
今天自己实现了这个功能,记录一下效果: 进入网页时先出现加载动画,加载完毕后显示网页实现原理: 在html上方放一个div,用来显示加载动画,js判断加载完毕事件,将div隐藏即可. 知识点整理: ...
loading动画_超级简单的CSS加载动画（冰淇淋loading加载动画）
点击右上方红色按钮关注"web秀",让你真正秀起来前言昨天再次收到"月球居民爱丽丝"的投稿(非常感谢"月球居民爱丽丝"),希望做一个冰淇 ...
【HTML网页前端开发加载动画案例】
提示:如需转载请联系作者授权才可使用. 目录前言一.网页加载动画是什么? 二.案例教学 1.HTML 当我们将css基础操作先做好之后,发现网页并不能完美对应大小,那么我们可以在基础代码定义块内做 ...
「切图仔日常」浅谈加载动画两板斧
1.前言此刻深圳大雨瓢泼,周围一片黑压压的.对于这样的日子,果断从冰箱里面拿出肥宅快乐水,打开电脑查看最近更新的番剧,舒服窝在沙发里真是美滋滋. 但是不知道大雨原因,网络加载一直时好时坏,看的贼忧伤 ...
使用HTML+CSS制作加载动画
简单的页面加载动画 html部分 <!DOCTYPE html> <html><head><meta charset="utf-8" /& ...
C#.Net网页加载等待效果漂亮并且简单
最近网页加载数据比较多,点击后给用户就是白板很不友好,想了很久找了些资料,在网页加载中显示等待画面给客户,页面加载完成自动隐藏等待效果. 在网页后台cs代码: protected void P ...
recyclerview item动画_这可能是你见过的迄今为止最简单的RecyclerView Item加载动画...
如何实现RecyclerView Item动画? 这个问题想必有很多人都会讲,我可以用ItemAnimator实现啊,这是RecyclerView官方定义的接口,专门扩展Item动画的,那我为什么要寻 ...
HTML小案例-使用CSS3实现网页加载loding动画
HTML小案例-使用CSS3实现网页加载loding动画话不多说先看效果 ** 以下为源代码 ** <!DOCTYPE html> <html lang="zh-CN&q ...
HTML5+CSS3小实例：简单又好看的加载动画效果
HTML5+CSS3做一个简单又好看的加载动画效果,一个三色圆环转动,再加圆环内部文字转动,效果虽然简单,但第一次看到还是很惊艳的,最主要一点,代码真的超简单的. 效果: 源码: <!DOCTY ...

【HTML】简单实现网页加载动画

效果：

实现原理：

知识点整理：

代码：

【HTML】简单实现网页加载动画相关推荐

最新文章

热门文章