在页面未加载完之前显示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(){});
页面中有一些大的资源文件,如图片,声音等,如果一个事件绑定写在这些加载资源代码的下方,那么要等资源加载完才会绑定,这样体验不够好. 于是想不等资源加载完,只要框架加载完成就绑定事件,就可以把代码放在以 ...
随机推荐
- 论文解读（GIN）《How Powerful are Graph Neural Networks》
Paper Information Title:<How Powerful are Graph Neural Networks?>Authors:Keyulu Xu, Weihua Hu, ...
- 探究Spring原理
探究Spring原理 探究IoC原理 首先我们大致了解一下ApplicationContext的加载流程: 我们可以看到,整个过程极为复杂,一句话肯定是无法解释的,所以我们就从ApplicationC ...
- docker学习笔记（2）——docker常用命令
参考博客: 1.官网教程:https://docs.docker.com/reference/ 可以一边敲命令一边对照官网学习,也可以通过阅读docker --help来学习 2..视频教程:http ...
- Linux CentOS7.X-安装mysql5.7数据库(安装包tar.gz）
一.下载对应版本的mysql 1.官网下载压缩安装包. 进入到mysql官网下载自己对应版本的mysql,下载地址:https://dev.mysql.com/downloads/mysql/5.7. ...
- 微服务从代码到k8s部署应有尽有系列（十二、链路追踪）
我们用一个系列来讲解从需求到上线.从代码到k8s部署.从日志到监控等各个方面的微服务完整实践. 整个项目使用了go-zero开发的微服务,基本包含了go-zero以及相关go-zero作者开发的一些中 ...
- 【译】ASP.NET Core 6 中的性能改进
原文 | Brennan Conroy 翻译 | 郑子铭 受到 Stephen Toub 关于 .NET 性能的博文的启发,我们正在写一篇类似的文章来强调 6.0 中对 ASP.NET Core 所做 ...
- 完全激活win server 2012的方法（亲测可行！）
1.从微软官网下载评估版. 2.运行->CMD(最好以管理员身份运行)->输入"DISM /online /Get-CurrentEdition"(最好直接复制粘贴,然 ...
- 从零开始，开发一个 Web Office 套件（11）：支持中文输入法（or 其它使用输入法的语言）
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- 如何写好B端产品的技术方案？
B端产品为企业提供协同办公的工具,帮助企业解决某类经营管理问题,核心价值在于为企业增加收入.降本提效.管控风险,企业级SaaS产品也是B端产品中的一类. B端产品有以下特点: 客户是一个群体:B端产 ...
- Ansible的原理与配置
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 Ansible原理 Ansible 是一款开源自动化平台.它是一种简单的自动化语言,能够在Ansible Playbook 中完美地描述 IT 应 ...