一个等待页面加载完毕的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异步加载,我们需要等待元素加载完成后,才能操作. 首 ...
随机推荐
- 使用OpenXML操作Office文档
使用OpenXML类库, 以编程的方式来访问PowerPoint, Word, Excel等文档, 有时能够为我们批量编辑文档提供方便. 最近项目中遇到的两个任务是: 1. 替换文档中的图片的Alt ...
- makefile 简单介绍
使用与来源: makefile文件(可由./configure创建)被make命令读取,make 命令执行时,需要一个 Makefile 文件,以告诉 make 命令需要怎么样的去编译和链接程序. 功 ...
- Mysql外键约束设置使用方法
如果表A的主关键字是表B中的字段,则该字段称为表B的外键,表A称为主表,表B称为从表.外键是用来实现参照完整性的,不同的外键约束方式将可以使两张表紧密的结合起来,特别是修改或者删除的级联操作将使得日常 ...
- kuangbin_MST B (POJ 1287)
裸的模板题 因为直接用的邻接矩阵所以用最小值覆盖先前输入的重复边 #include <cstdio> #include <cstring> #include <queue ...
- 《统计推断（Statistical Inference）》读书笔记——第6章 数据简化原理
在外行眼里统计学家经常做的一件事就是把一大堆杂七杂八的数据放在一起,算出几个莫名其妙的数字,然后再通过这些数字推理出貌似很靠谱的结论,简直就像是炼金术士用“贤者之石”把一堆石头炼成了金矿.第六章,应该 ...
- 【转】iOS bitcode实战 -- without full bitcode
原文网址:http://www.voidcn.com/blog/GrowingGiant/article/p-5012705.html 关于bitcode的介绍,直接看下边两篇: 理解Bitcode: ...
- 网易开发工程师编程题 比较重量 Java
比较重量 小明陪小红去看钻石,他们从一堆钻石中随机抽取两颗并比较她们的重量.这些钻石的重量各不相同.在他们们比较了一段时间后,它们看中了两颗钻石g1和g2.现在请你根据之前比较的信息判断这两颗钻石的哪 ...
- Deepin下phpunit安装，以及执行过程中所遇到的问题
Deepin下phpunit安装,以及执行过程中所遇到的问题 安装phpunit步骤 wget https://phar.phpunit.de/phpunit.phar chmod +x phpuni ...
- SQL总结（六）触发器
SQL总结(六)触发器 概念 触发器是一种特殊类型的存储过程,不由用户直接调用.创建触发器时会对其进行定义,以便在对特定表或列作特定类型的数据修改时执行. 触发器可以查询其他表,而且可以包含复杂的 S ...
- SilverlightOA源代码（可用于企业级Silverlight项目的二次开发，长年有效）
Silverlight OA系统简介 系统功能简介 l 程序界面介绍: 左侧为主菜单,主菜单可以展开和收起,主菜单下面的所有模块都可以在数据库中扩展增加,模块的权限和用户角色挂钩,可以在数据库中创建多 ...