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动画的更多相关文章

  1. JS实现页面加载完毕之前loading提示效果

    1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...

  2. js实现的页面加载完毕之前loading提示效果

    页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...

  3. ionic 页面加载事件及loading动画

    页面加载完成事件(非刷新情况下,页面切换是不会重复触发此事件的,只在第一次进入页面时触发,需要重复触发的话请使用 $ionicView.enter 事件) angular.module('app.co ...

  4. Selenium_等待页面加载完毕

    隐式等待 WebDriver driver = new FirefoxDriver(); driver.get("www.baidu.com"); driver.manage(). ...

  5. jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  6. java selenium (十三) 智能等待页面加载完成

    我们经常会碰到用selenium操作页面上某个元素的时候, 需要等待页面加载完成后, 才能操作.  否则页面上的元素不存在,会抛出异常. 或者碰到AJAX异步加载,我们需要等待元素加载完成后, 才能操 ...

  7. 实用脚本 - - addLoadEvent 页面加载完毕执行函数

    function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != "functio ...

  8. JS判断页面加载完毕

    //JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果. document.onreadystatechange = function () { if (document.readySta ...

  9. 关于selenium的智能等待页面加载的问题

    我们经常会碰到用selenium操作页面上某个元素的时候,需要等待页面加载完成后,才能操作, 否则页面上的元素不存在,会抛出异常. 或者碰到AJAX异步加载,我们需要等待元素加载完成后,才能操作. 首 ...

随机推荐

  1. 黑马程序员：Java编程_面向对象

    =========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 面向对象和面向过程都是一种思想,面向过程强调的是功能行为,面向对象是将功能封装进 ...

  2. 帝国CMS【操作类型】说明详解

    看标签的参数时候,一般最后一个参数是操作类型说明,可是后面写的是:"操作类型说明 具体看操作类型说明", 这个操作类型说明在什么地方看啊 操作类型 说明 操作类型 说明 0 各栏目 ...

  3. Windows下Redis的安装使用

      摘要 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted ...

  4. SAP HR宏 rp-provide-from-last

    运行se11 Database table: 输入 TRMAC 点击display 查看其内容:第14个按钮(ctrl + shift +F10) 再Name 输入:rp-provide-from-l ...

  5. 【转载】7 Steps for Calculating the Largest Lyapunov Exponent of Continuous Systems

    原文地址:http://sprott.physics.wisc.edu/chaos/lyapexp.htm The usual test for chaos is calculation of the ...

  6. 黑马程序员——JAVA基础之File类，递归，打印流，合并切割流

    ------- android培训.java培训.期待与您交流! ---------- File类 用来将文件或者文件夹封装成对象 方便对文件与文件夹的属性信息进行操作. File对象可以作为参数传递 ...

  7. jQuery 获取父窗口的元素 父窗口 子窗口(iframe)

    $("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementById ...

  8. msp430FR5739 FRAM的学习

    FRAM,中文名称为铁电存储器..FRAM提供一种与RAM一致的性能,但又有与ROM 一样的非易失性. FRAM 克服以上二种记忆体的缺陷并合并它们的优点,它是全新创造的产品,一个非易失性随机存取储存 ...

  9. 转：Elasticsearch TermQuery 详解

    JavaClient 查询ES QueryBuilder queryBuilder = QueryBuilders.termQuery("字段","term值" ...

  10. spring + spring mvc可能会遇到的问题

    Spring容器优先加载由ServletContextListener(对应applicationContext.xml)产生的父容器,而SpringMVC(对应mvc_dispatcher_serv ...