在页面未加载完之前显示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：QTableWidget
0.说明 QTableWidget类提供了一个基于Item的Table视图,如下图: Table Widget提供了表格用于显示.Table中的每个Item都是QTableWidgetItem对象. ...
- CSS复合选择器，元素的显示模式，CSS背景设置
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- tensorflow源码解析之distributed_runtime
本篇主要介绍TF的分布式运行时的基本概念.为了对TF的分布式运行机制有一个大致的了解,我们先结合/tensorflow/core/protobuf中的文件给出对TF分布式集群的初步理解,然后介绍/te ...
- Linux开机自启应用&开机执行脚本&监听端口应用挂掉了执行启动脚本
linux开机自启 背景 目前要部署一个spring boot框架的jar包,实现开机启动项目或者应用挂掉了 执行启动脚本 在root目录下有一个启动项目的脚本: app_start.sh app_s ...
- LGP2891题解
题目大意 有 \(n\) 只奶牛,\(q\) 种食物和 \(p\) 种饮料,每只奶牛喜欢一些饮料和食物,但只能那一种,求最小配对数量. 首先来看一下这道题的简化版:没有饮料,该怎么做呢? 我会!裸的二 ...
- Python之简单的用户名密码验证
题目要求: 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 #要求使用文件存储用户名和密码,每次从文件读入用户名和密码用来验证,如果输错三次密码该账户会被锁定,并讲锁定的用户名写入文件 # ...
- 【Linux基础】ps命令详解
PS命令介绍 Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动 ...
- 机器学习实战 | SKLearn最全应用指南
作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/41 本文地址:http://www.showmeai.tech/article-det ...
- Java基础——基本类型包装类
一.概述: 将基本数据类型封装成对象 优点: 可以在对象中定义更多的功能方法操作该数据 常见用法: 用于基本类型与字符串之间的转换 基本数据类型 包装类 byte Byte short Short i ...
- ARM中断与架构知识 精简知识点
目录 一.ARM系统的异常与中断 二.CPU模式与寄存器 1.ARM CPU模式 2.ARM CPU state,两种指令集 3.ARM CPU寄存器: 引申介绍一下存储空间中的数据存放 4.ARM三 ...