在页面未加载完之前显示loading动画
在页面未加载完之前显示loading动画
loading动画代码demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>use-pseudo-class</title>
<style>
.loading{
width: 100px;
height: 100px;
border: 1px solid red;
position: relative;
}
.loading::before,.loading::after{
content: '';
/*这里要加一个content,不然什么都没有*/
position: absolute;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation: toBig 1.5s linear infinite;
}
.loading::after{
animation-delay: 0.75s;
/*background-color: red;*/
}
@keyframes toBig {
0%{
width: 0;
height: 0;
opacity: 1;
}
100%{
width: 50px;
height:50px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="loading">
</div>
</body>
</html>加入到实际页面的使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>loading动画</title>
<!--loading style-->
<style>
.loading{
width: 100px;
height: 100px;
/*border: 1px solid red;*/
position: relative;
}
.loading::before,.loading::after{
content: '';
/*这里要加一个content,不然什么都没有*/
position: absolute;
width: 0;
height: 0;
background: #000;
border-radius: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation: toBig 1s linear infinite;
}
.loading::after{
animation-delay: 0.5s;
/*background-color: red;*/
}
@keyframes toBig {
0%{
width: 0;
height: 0;
opacity: 1;
}
100%{
width: 50px;
height:50px;
opacity: 0;
}
}
</style>
<style>
.site-welcome{
display: none;
justify-content:center;
align-items:center;
/*里面内容居中使用flex在父元素添加三行代码display:flex;justify-content:center;
align-items:center;*/
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*上面四行代码,让这个fixed铺满整个画面*/
background-color: #ccc;
z-index: 1;
}
.site-welcome.active{
display:flex;
}
</style>
</head>
<body>
<div class="site-welcome active" id="siteWelcome">
<div class="loading">
</div>
</div>
//.
//.
//.
//这里是其他代码
<script>
//当代码加载到这里的时候,执行这个script,当代码加载到这里,说明loading该结束了
window.onload=function(){
var siteWelcome = document.getElementById('siteWelcome');
siteWelcome.classList.remove('active');
}
</script>
</body>
</html>本文转载于:猿2048➮https://www.mk2048.com/blog/blog.php?id=hcj112010kj
在页面未加载完之前显示loading动画的更多相关文章
- vue项目未加载完成前显示loading...
1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...
- 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.
一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...
- 页面加载完之前显示Loading
1.第一种方式 HTML <body class="is-loading"> <div class="curtain"> <div ...
- js图片未加载完显示loading效果
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- 使用selenium操作ant design前端的页面，感觉页面没加载完
因需要收集页面数据,遂准备使用selenium爬取瓦斯阅读页面, 瓦斯网站使用的是ant design,元素定位非常困难,页面元素都没有ID,现在还只是能做到操作登录,不能自动打开订阅,查询某公众号, ...
- 在iframe内页面完全加载完后，关闭父页面生成的div遮罩层
遮罩层div为iframe父页面生成,需在iframe内页面完全加载完后,关闭遮罩层 alertMsgClose() :函数为关闭遮罩层函数 此段代码在iframe页面内: <script> ...
- 解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题
解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题: <style> [v-cloak]{ display: none; } </style> <div id=& ...
- CefSharp如何判断页面是否加载完
问题:CefSharp如何判断页面是否加载完毕. 摘要:相信C#用CefSharp做浏览器来发的应该有很多人都会有遇到这个问题.特别是要执行JavaScript的时候,涉及到跨页面的JavaScrip ...
- 页面框架加载完自动执行函数$(function(){});
页面中有一些大的资源文件,如图片,声音等,如果一个事件绑定写在这些加载资源代码的下方,那么要等资源加载完才会绑定,这样体验不够好. 于是想不等资源加载完,只要框架加载完成就绑定事件,就可以把代码放在以 ...
随机推荐
- Qt：QNetworkRequest
0.说明 QNetworkRequest类代表被QNetworkAccessManager发送的请求. QNetworkReuqest是网络访问API的一部分,在其内部保留了在网络上发送一个reque ...
- oracel数据库ORA-28001: the password has expired
调试c#项目时登录用户不成功ORA-28001: the password has expired错误 密码过期失效 网上查了一下,是Oracle11g密码过期的原因 Oracle提示错误消息ORA- ...
- linux-日常工作积累
Linux常用命令之envsubst https://blog.csdn.net/banche163/article/details/101369495 Linux中的EAGAIN含义 https:/ ...
- java面向对象（三）
java面向对象(三) 1.四种权限修饰符 public > protected > (default) > private 注意:(default)并不是关键字default,而是 ...
- foreach 改变集合时不能使用
使用foreach循环遍历list集合时,出现Collection was modified; enumeration operation may not execute.这个错误,查了半天才发现是当 ...
- CAS 比较并交换
简介 CAS 的全称为 Compare-And-Swap,他是一条 CPU 并发源语. 他的功能是判断内存某个位置的值是否为预期值,如果是则更改为新的值,这个过程是原子的. CAS 并发原语体现在 J ...
- cookie、session和Storage
概念: cookie:HTTP响应头的一部分,通过name=value的形式存储,主要用于保存登录信息.在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭. 存放数据大小为4K左右 .有个 ...
- 通过IMM With Remote Console为服务器安装操作系统
现有IBM System x3750 M4(8722A1C)配置 产品类别 机架式 产品结构 2U CPU类型 Intel 至强E5-4600 CPU型号 Xeon E5-4640 CPU频率 2 ...
- LGP3449题解
其实每个串都不是回文串也能做的说... 题意:给定 \(n\) 个互不相同的串,两两拼接一共能够拼出 \(n^2\) 个串,问这 \(n^2\) 个串中有几个回文串. 首先假设拼接出来的串是 \(AB ...
- CVE-2018-12613phpMyAdmin 后台文件包含漏洞分析
一. 漏洞背景 phpMyAdmin 是一个以PHP为基础,以Web-Base方式架构在网站主机上的MySQL的数据库管理工具,让管理者可用Web接口管理MySQL数据库.借由此Web接口可以成 ...