mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-29 13:47:02 +08:00
Code Issues Actions 13 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

35
index.html
View File

@ -11,25 +11,24 @@
<![endif]-->
</head>
<body>
<div id="react-content">
<div class="ant-site-loading">
<img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' />
<div id="loading-text">A Design Language</div>
</div>
<script>
const content = document.getElementById('loading-text');
content.innerHTML = content.innerText.split('').map(function(letter, i) {
var className;
if (i > 0 && i < content.innerText.length - 1) {
className = 'yoyo-x-' + (i % 6);
}
if (letter.trim() === '') {
className += ' blank';
}
return '<span class="' + className + '">' + letter + '</span>';
}).join('');
</script>
<div id="react-content"></div>
<div class="ant-site-loading">
<img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' />
<div id="loading-text">A Design Language</div>
</div>
<script>
const content = document.getElementById('loading-text');
content.innerHTML = content.innerText.split('').map(function(letter, i) {
var className;
if (i > 0 && i < content.innerText.length - 1) {
className = 'yoyo-x-' + (i % 6);
}
if (letter.trim() === '') {
className += ' blank';
}
return '<span class="' + className + '">' + letter + '</span>';
}).join('');
</script>
</body>
<script src="./index.js"></script>
</html>

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

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