Add site loading, close ant-design#1632

bujichong · May 11, 2016 · d63a16f · d63a16f
1 parent 9321c5f
commit d63a16f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -11,7 +11,12 @@
     <![endif]-->
 </head>
 <body>
-<div id="react-content"></div>
+  <div id="react-content1">
+    <div class="ant-site-loading">
+      <img width="100" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" alt="loading..." />
+      <div>A Design Langague</div>
+    </div>
+  </div>
 </body>
 <script src="./index.js"></script>
 </html>
diff --git a/site/common/styles/common.less b/site/common/styles/common.less
@@ -75,3 +75,35 @@ a {
 .outside-link.internal {
   display: none;
 }
+
+.ant-site-loading {
+  height: 100vh;
+  width: 100vw;
+  background: #fff;
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
+  img {
+    animation: siteLoadingCircle 2s ease-in-out infinite;
+    transform-origin: 50% 50%;
+    margin-top: -50px;
+  }
+  div {
+    font-family: lato;
+    color: #777;
+    font-size: 16px;
+    letter-spacing: 2px;
+  }
+}
+
+@keyframes siteLoadingCircle {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}