mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-15 22:49:07 +08:00
Code Issues Actions 30 Packages Projects Releases Wiki Activity

loader (#1671)

Browse Source 
* update loader-anim

* update ant-site-loading opacity

* fix blank lines
This commit is contained in:
jiang 2016-05-12 18:07:08 +08:00 committed by afc163
parent ef8852bc27
commit 8da2be64aa
2 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -11,7 +11,7 @@
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<div id="react-content"> <div id="react-content"></div>
<div class="ant-site-loading"> <div class="ant-site-loading">
<img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' /> <img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' />
<div id="loading-text">A Design Language</div> <div id="loading-text">A Design Language</div>
@ -29,7 +29,6 @@
return '<span class="' + className + '">' + letter + '</span>'; return '<span class="' + className + '">' + letter + '</span>';
}).join(''); }).join('');
</script> </script>
</div>
</body> </body>
<script src="./index.js"></script> <script src="./index.js"></script>
</html> </html>

22
site/common/styles/common.less
View File

@ -14,7 +14,7 @@ body {
line-height: 1.5; line-height: 1.5;
color: #666; color: #666;
font-size: 14px; font-size: 14px;
background: #ECECEC; background: #FFF;
transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1); transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
overflow-x: hidden; overflow-x: hidden;
} }
@ -77,20 +77,25 @@ a {
} }
.ant-site-loading { .ant-site-loading {
height: 100vh;
width: 100vw; width: 100vw;
background: #fff;
text-align: center; text-align: center;
display: table-cell; position: absolute;
vertical-align: middle; top: 50%;
margin-top: -50px;
transition: opacity .45s;
pointer-events: none;
opacity: 0;
img { img {
transform-style: preserve-3d; transform-style: preserve-3d;
display: block; display: block;
width: 70px; width: 64px;
margin: -50px auto 10px; margin: 0 auto 10px;
animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
} }
} }
#react-content:empty + .ant-site-loading {
opacity: 1;
}
#loading-text { #loading-text {
font-family: lato; font-family: lato;
@ -112,7 +117,8 @@ a {
} }
.page-wrapper { .page-wrapper {
animation: pageEnter .3s cubic-bezier(0.455, 0.03, 0.515, 0.955); background: #ECECEC;
animation: pageEnter .45s cubic-bezier(0.455, 0.03, 0.515, 0.955);
} }
.loop-yoyo-load(@index) when (@index >= 0) { .loop-yoyo-load(@index) when (@index >= 0) {