1 HTML section
<! DOCTYPE html>
<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> Big Data analytics platform </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-a UI language _files/index.css" >
<style>
#loading-mask{//Mask Layer
Position:absolute;
left:0;
top:0;
width:100%;
height:100%;
Z-index:-1;
Background-color: #eee;
}
</style>
<body>
<div class= "ant-site-loading" id= "ant-site-loading" >
<div id= "Loading-mask" ></div>
<div id= "Loading-text" style= "Text-align:center;" ><span class= "undefined" > Big </span><span class= "yoyo-x-1 blank" > </span><span class= " Yoyo-x-2 "> Number </span><span class=" yoyo-x-3 "> According to </span><span class=" yoyo-x-4 "> Sub </span ><span class= "yoyo-x-5" > Analysis </span><span class= "yoyo-x-0" > Flat </span><span class= " Yoyo-x-1 "> Taiwan </span></div>
</div>
</body>
2 CSS Sections
. 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)}
A loading animation waiting for the page to be loaded