一个等待页面加载完毕的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异步加载,我们需要等待元素加载完成后,才能操作. 首 ...
随机推荐
- python数据结构与算法——图的最短路径（Floyd-Warshall算法）
使用Floyd-Warshall算法 求图两点之间的最短路径 不允许有负权边,时间复杂度高,思路简单 # 城市地图(字典的字典) # 字典的第1个键为起点城市,第2个键为目标城市其键值为两个城市间的直 ...
- [读书笔记] java类初始化
以下内容来自周志明的<深入理解java虚拟机>: 类初始化阶段是类加载过程的最后一步,前面的类加载过程中,除了在加载阶段用户应用程序可以通过自定义类加载器参与之外,其余动作完全由虚拟机主导 ...
- TCP链接时主动close时可能的rst报文
阿里核心系统团队博客http://csrd.aliapp.com/?p=1055记录了主动关闭TCP socket时,可能不发fin包,而是发rst的问题. 其原因是主动关闭socket时,若接收bu ...
- POJ-1743 Musical Theme(后缀数组)
题目大意:给一个整数序列,找出最长的连续变化相同的.至少出现两次并且不相重叠一个子序列. 题目分析:二分枚举长度进行判定. 代码如下: # include<iostream> # incl ...
- Servlet基本模式
一.首先用Myeclipse2015创建一个web项目,然后修改index.jsp. <%@ page language="java" import="java.u ...
- Lua与C++相互调用
{--1.环境--} 为了快速入手,使用了小巧快速的vc++6.0编译器 以及在官网下载了Lua安装包..官网地址{--http://10.21.210.18/seeyon/index.jsp--} ...
- BYTE 和字符串转换
string hanzi = "汉字"; byte[] arr = System.Text.Encoding.UTF8.GetBytes(hanzi); string temp = ...
- CSAPP(前言)
很久之前就听过有过CSAPP这本书的传闻了,今天终于决定上手这本神作:既然是神作,就要仔细拜读一下,今天看了一下前言部分还真的令人耳目一新,单单是前言部分就让我学习到几个新的知识点: 1.c和Java ...
- OAF_文件系列3_实现OAF多行表中附件功能AttachmentImage（案例）
20150727 Created By BaoXinjian
- Android Gradle 技巧之二： 最爱命令行
命令行 很多做 Android 开发不久的同学,习惯于使用图形界面,对命令行操作很陌生甚至恐惧.遇到 AS 运行错误,束手无策.AS 为了确保易用性,也在 UI 界面上屏蔽了很多命令行运行的细节,导致 ...