在页面未加载完之前显示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(){});
页面中有一些大的资源文件,如图片,声音等,如果一个事件绑定写在这些加载资源代码的下方,那么要等资源加载完才会绑定,这样体验不够好. 于是想不等资源加载完,只要框架加载完成就绑定事件,就可以把代码放在以 ...
随机推荐
- 查询性能提升3倍！Apache Hudi 查询优化了解下？
从 Hudi 0.10.0版本开始,我们很高兴推出在数据库领域中称为 Z-Order 和 Hilbert 空间填充曲线的高级数据布局优化技术的支持. 1. 背景 Amazon EMR 团队最近发表了一 ...
- 【ASP.NET Core】绑定到 CancellationToken 对象
负责管理 HTTP 请求上下文的 HttpContext 对象有一个名为 RequestAborted 的属性.据其名思其义,就是可用来表示客户端请求是否已取消. 果然,它的类型是 Cancellat ...
- Pycharm：集体缩进、注释、折叠
1.集体缩进 选中代码块,按TAB 2.集体前移 选中代码块,Shift TAB 3.集体注释 选中代码块,CTRL + / 4.取消集体注释 再按一下CTRL+/ 5.集体折叠 CTRL+SHIFT ...
- vue初步构建项目
新建项目文件夹 在当前文件夹打开命令行工具(shift+右键-->在次此处打开命令窗口) npm install -g vue-cli npm init webpack npm install ...
- Python的介绍与主要方向
1.1 编程与编程语言 python是一门编程语言,作为学习python的开始,需要事先搞明白:编程的目的是什么?什么是编程语言?什么是编程? 编程的目的: 计算机的发明,是为了用机器取代/解放人力, ...
- 【笔记】封神榜游戏设计VR
一.添加怪物(这个教程的鬼兵我可以用)1.设置怪物出生点.2.创建一个新脚本-CreateMonster,写好脚本之后放到3个传送门上.3.然后添加完成后,给三个添加Audio Source组件4.可 ...
- js json.stringfy()和json.parse()的用法
1.JSON.parse;作用:将JavaScript对象表示法的JSON字符串转换为对象(字符串转对象)语法:JSON.parse(text [, reviver])text 必选. 一个有效的 J ...
- laravel7 搜索分页
html: <form action="{{url('http://www.yanbing.com/fang/index')}}" method="get" ...
- 微信网页JSDK接口-wx.chooseImage问题
wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceTy ...
- OpenCV基础_二
阈值和平滑处理 cv2.threshold()二值化函数 ret,thresh = cv2.threshold(src, thresh, maxval, type[, dst]) 参数 src:所要进 ...