一个等待页面加载完毕的loading动画
1 html 部分
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大数据分析平台</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="./Ant Design - 一个 UI 设计语言_files/index.css">
<style>
#loading-mask{//遮罩层
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:-1;
background-color:#eee;
}
</style>
</head>
<body>
<div class="ant-site-loading" id="ant-site-loading">
<div id="loading-mask"></div>
<img src="./Ant Design - 一个 UI 设计语言_files/dashuju.png">
<div id="loading-text" style="text-align:center;"><span class="undefined">大</span><span class="yoyo-x-1 blank"> </span><span class="yoyo-x-2">数</span><span class="yoyo-x-3">据</span><span class="yoyo-x-4">分</span><span class="yoyo-x-5">析</span><span class="yoyo-x-0">平</span><span class="yoyo-x-1">台</span></div>
</div>
</body>
</html>
2 css部分
.ant-site-loading img{
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;display:block;width:64px;margin:0 auto 10px;-webkit-animation:loadTween 2s cubic-bezier(.785,.135,.15,.86)
infinite;animation:loadTween 2s cubic-bezier(.785,.135,.15,.86) infinite}#react-content:empty+.ant-site-loading{opacity:1}
#loading-text{font-family:lato,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;color:#777;font-size:16px;letter-spacing:2px}#loading-text>span{display:inline-block}
#loading-text>span:first-child{-webkit-animation:xLeftMatrixR 2s cubic-bezier(.645,.045,.355,1) infinite alternate;animation:xLeftMatrixR 2s cubic-bezier(.645,.045,.355,1) infinite alternate}
#loading-text>span:last-child{-webkit-animation:xRightMatrixR 2s cubic-bezier(.645,.045,.355,1) infinite alternate;animation:xRightMatrixR 2s cubic-bezier(.645,.045,.355,1) infinite alternate}
#loading-text>span.blank{width:.4em}.page-wrapper{background:#ececec}.yoyo-x-5{-webkit-animation:Load5 2s cubic-bezier(.645,.045,.355,1) infinite alternate;animation:Load5 2s cubic-bezier(.645,.045,.355,1)
infinite alternate}.yoyo-x-4{-webkit-animation:Load4 2s cubic-bezier(.645,.045,.355,1) infinite alternate;animation:Load4 2s cubic-bezier(.645,.045,.355,1) infinite alternate}.yoyo-x-3{-webkit-animation:Load3 2s
cubic-bezier(.645,.045,.355,1) infinite alternate;animation:Load3 2s cubic-bezier(.645,.045,.355,1) infinite alternate}.yoyo-x-2{-webkit-animation:Load2 2s cubic-bezier(.645,.045,.355,1) infinite alternate;
animation:Load2 2s cubic-bezier(.645,.045,.355,1) infinite alternate}.yoyo-x-1{-webkit-animation:Load1 2s cubic-bezier(.645,.045,.355,1) infinite alternate;animation:Load1 2s cubic-bezier(.645,.045,.355,1)
infinite alternate}.yoyo-x-0{-webkit-animation:Load0 2s cubic-bezier(.645,.045,.355,1) infinite alternate;animation:Load0 2s cubic-bezier(.645,.045,.355,1) infinite alternate}@-webkit-keyframes
loadTween{0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}50%{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}to{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}
@keyframes loadTween{0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}50%{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}to{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}
@-webkit-keyframes xLeftMatrixR{0%{opacity:0;-webkit-transform:translateX(-50px) rotate(-30deg) scale(1.5);transform:translateX(-50px) rotate(-30deg) scale(1.5)}20%{opacity:0;-webkit-transform:translateX(-50px)
rotate(-30deg) scale(1.5);transform:translateX(-50px) rotate(-30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translateX(0) rotate(0deg) scale(1);transform:translateX(0) rotate(0deg) scale(1)}}
@keyframes xLeftMatrixR{0%{opacity:0;-webkit-transform:translateX(-50px) rotate(-30deg) scale(1.5);transform:translateX(-50px) rotate(-30deg) scale(1.5)}20%{opacity:0;-webkit-transform:translateX(-50px)
rotate(-30deg) scale(1.5);transform:translateX(-50px) rotate(-30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translateX(0) rotate(0deg) scale(1);transform:translateX(0) rotate(0deg) scale(1)}}
@-webkit-keyframes xRightMatrixR{0%{opacity:0;-webkit-transform:translateX(50px) rotate(30deg) scale(1.5);transform:translateX(50px) rotate(30deg) scale(1.5)}20%{opacity:0;-webkit-transform:translateX(50px)
rotate(30deg) scale(1.5);transform:translateX(50px) rotate(30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translateX(0) rotate(0deg) scale(1);transform:translateX(0) rotate(0deg) scale(1)}}
@keyframes xRightMatrixR{0%{opacity:0;-webkit-transform:translateX(50px) rotate(30deg) scale(1.5);transform:translateX(50px) rotate(30deg) scale(1.5)}20%{opacity:0;-webkit-transform:translateX(50px) rotate(30deg)
scale(1.5);transform:translateX(50px) rotate(30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translateX(0) rotate(0deg) scale(1);transform:translateX(0) rotate(0deg) scale(1)}}@-webkit-keyframes
Load5{0%{opacity:0;-webkit-transform:translate(-30px,30px) rotate(-30deg) scale(1.5);transform:translate(-30px,30px) rotate(-30deg) scale(1.5)}20%{opacity:0;-webkit-transform:translate(-30px,30px) rotate(-30deg) scale(1.5);
transform:translate(-30px,30px) rotate(-30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translate(0) rotate(0deg) scale(1);transform:translate(0) rotate(0deg) scale(1)}}@keyframes Load5{0%{opacity:0;
-webkit-transform:translate(-30px,30px) rotate(-30deg) scale(1.5);transform:translate(-30px,30px) rotate(-30deg) scale(1.5)}20%{opacity:0;-webkit-transform:translate(-30px,30px) rotate(-30deg) scale(1.5);
transform:translate(-30px,30px) rotate(-30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translate(0) rotate(0deg) scale(1);transform:translate(0) rotate(0deg) scale(1)}}@-webkit-keyframes Load4{0%{opacity:0;
-webkit-transform:translate(30px,-30px) rotate(-30deg) scale(1.5);transform:translate(30px,-30px) rotate(-30deg) scale(1.5)}20%{opacity:0;-webkit-transform:translate(30px,-30px) rotate(-30deg) scale(1.5);
transform:translate(30px,-30px) rotate(-30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translate(0) rotate(0deg) scale(1);transform:translate(0) rotate(0deg) scale(1)}}
@keyframes Load4{0%{opacity:0;-webkit-transform:translate(30px,-30px) rotate(-30deg) scale(1.5);transform:translate(30px,-30px) rotate(-30deg) scale(1.5)}20%{opacity:0;
-webkit-transform:translate(30px,-30px) rotate(-30deg) scale(1.5);transform:translate(30px,-30px) rotate(-30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translate(0)
rotate(0deg) scale(1);transform:translate(0) rotate(0deg) scale(1)}}@-webkit-keyframes Load3{0%{opacity:0;-webkit-transform:translate(-30px,-30px) rotate(30deg) scale(1.5);
transform:translate(-30px,-30px) rotate(30deg) scale(1.5)}20%{opacity:0;-webkit-transform:translate(-30px,-30px) rotate(30deg) scale(1.5);transform:translate(-30px,-30px)
rotate(30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translate(0) rotate(0deg) scale(1);transform:translate(0) rotate(0deg) scale(1)}}@keyframes Load3{0%{opacity:0;
-webkit-transform:translate(-30px,-30px) rotate(30deg) scale(1.5);transform:translate(-30px,-30px) rotate(30deg) scale(1.5)}20%{opacity:0;-webkit-transform:translate(-30px,-30px)
rotate(30deg) scale(1.5);transform:translate(-30px,-30px) rotate(30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translate(0) rotate(0deg) scale(1);transform:translate(0) rotate(0deg) scale(1)}}
@-webkit-keyframes Load2{0%{opacity:0;-webkit-transform:translate(-30px,30px) rotate(-30deg) scale(1.5);transform:translate(-30px,30px) rotate(-30deg) scale(1.5)}20%{opacity:0;-webkit-transform:translate(-30px,30px)
rotate(-30deg) scale(1.5);transform:translate(-30px,30px) rotate(-30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translate(0) rotate(0deg) scale(1);transform:translate(0) rotate(0deg) scale(1)}}
@keyframes Load2{0%{opacity:0;-webkit-transform:translate(-30px,30px) rotate(-30deg) scale(1.5);transform:translate(-30px,30px) rotate(-30deg) scale(1.5)}20%{opacity:0;-webkit-transform:translate(-30px,30px) rotate(-30deg)
scale(1.5);transform:translate(-30px,30px) rotate(-30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translate(0) rotate(0deg) scale(1);transform:translate(0) rotate(0deg) scale(1)}}
@-webkit-keyframes Load1{0%{opacity:0;-webkit-transform:translate(30px,30px) rotate(30deg) scale(1.5);transform:translate(30px,30px) rotate(30deg) scale(1.5)}20%{opacity:0;-webkit-transform:translate(30px,30px)
rotate(30deg) scale(1.5);transform:translate(30px,30px) rotate(30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translate(0) rotate(0deg) scale(1);transform:translate(0) rotate(0deg) scale(1)}}
@keyframes Load1{0%{opacity:0;-webkit-transform:translate(30px,30px) rotate(30deg) scale(1.5);transform:translate(30px,30px) rotate(30deg) scale(1.5)}20%{opacity:0;-webkit-transform:translate(30px,30px) rotate(30deg) scale(1.5)
;transform:translate(30px,30px) rotate(30deg) scale(1.5)}80%{opacity:1;-webkit-transform:translate(0) rotate(0deg) scale(1);transform:translate(0) rotate(0deg) scale(1)}}
@-webkit-keyframes Load0{0%{opacity:0;-webkit-transform:translate(30px,-30px) rotate(-30deg) scale(1.5);transform:translate(30px,-30px) rotate(-30deg) scale(1.5)}
一个等待页面加载完毕的loading动画的更多相关文章
- JS实现页面加载完毕之前loading提示效果
1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...
- js实现的页面加载完毕之前loading提示效果
页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...
- ionic 页面加载事件及loading动画
页面加载完成事件(非刷新情况下,页面切换是不会重复触发此事件的,只在第一次进入页面时触发,需要重复触发的话请使用 $ionicView.enter 事件) angular.module('app.co ...
- Selenium_等待页面加载完毕
隐式等待 WebDriver driver = new FirefoxDriver(); driver.get("www.baidu.com"); driver.manage(). ...
- jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- java selenium (十三) 智能等待页面加载完成
我们经常会碰到用selenium操作页面上某个元素的时候, 需要等待页面加载完成后, 才能操作. 否则页面上的元素不存在,会抛出异常. 或者碰到AJAX异步加载,我们需要等待元素加载完成后, 才能操 ...
- 实用脚本 - - addLoadEvent 页面加载完毕执行函数
function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != "functio ...
- JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...
- 关于selenium的智能等待页面加载的问题
我们经常会碰到用selenium操作页面上某个元素的时候,需要等待页面加载完成后,才能操作, 否则页面上的元素不存在,会抛出异常. 或者碰到AJAX异步加载,我们需要等待元素加载完成后,才能操作. 首 ...
随机推荐
- linux命令：exec
1.命令介绍: exec用来配合find命令找到的文件后接着执行相应的命令 2.命令格式: find . -type f exec ls -l {} \;
- UILabel 的高度根据文字内容调整
1.UILabel 对文字的自适应有两种方法. 1)将label的numberOfLines设为0;并添加自适应方法[titleLabel sizeToFit],但是这种方法并不理想. 2)根据文字的 ...
- IOS中获取各种文件的路径介绍及方法
IOS中获取各种文件的目录路径的方法 技术交流新QQ群:414971585 iphone沙箱模型的有四个文件夹,分别是什么,永久数据存储一般放在什么位置,得到模拟器的路径的简单方式是什么. docum ...
- ✡ leetcode 164. Maximum Gap 寻找最大相邻数字差 --------- java
Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...
- CSS之利用text-indent隐藏文字用图片当Login
html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- javascript中的闭包解析
学习javaScript已经有一段时间了,在这段时间里,已经感受到了JavaScript的种种魅力,这是一门神奇的语言,同时也是一门正在逐步完善的语言,相信在大家的逐步修改中,这门语言会逐步的完善下去 ...
- powerdsigner java对象模型将中文name生成在注释中
[\n]\ @Title [%Name%\n\n]\ 遗憾的是保存这个配置会出错,每次软件启动后要重新配置. 生成出来的字段样式: /** * 评论时间 * * @pdOid bd8ec6fd-5cb ...
- SQL总结（四）编辑类
SQL总结(四)编辑类 应有尽有 1.数据库 创建数据库语法: CREATE DATABASE database_name 1)创建测试库 CREATE DATABASE TestDB 2)使用库 U ...
- SpringMVC处理静态资源
若将DispatcheServlet请求映射设置为/,则SpringMvc将捕获WEB容器的所有请求,包括静态资源的请求,SpringMvc会将它们当成一个普通的请求处理,那么将会出现因找不到对应的处 ...
- Celery 和 Redis 入门
Celery 是一个广泛应用于网络应用程序的任务处理系统. 它可以在以下情况下使用: 在请求响应周期中做网络调用.服务器应当立即响应任何网络请求.如果在请求响应周期内需要进行网络调用,则应在周期外完成 ...