🆕 重构加载动画

packages/doc/package.json

@@ -2,8 +2,6 @@
   "name": "@h5-dooring/doc",
   "version": "0.0.1",
   "description": "文档",
-  "author": "mokinzhao <zhaoyl3@yonghui.cn>",
-  "homepage": "https://github.com/mokinzhao/h5-Dooring#readme",
   "license": "ISC",
   "main": "index.js",
   "scripts": {

packages/editor/src/components/LoadingCp/index.tsx

@@ -1,3 +1,14 @@
 import React from 'react';
 
-export default () => <div className="rotate-animate">Dooring</div>;
+export default () => (
+  <div className="rotate-animate">
+    <div className="line-scale-pulse-out">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+    <h3 style={{textAlign: 'center', fontStyle: 'italic', color: '#2842d8'}}>H5-Dooring, 让H5制作更简单</h3>
+  </div>
+);

packages/editor/src/global.css

@@ -139,26 +139,42 @@ img {
 }
 
 .rotate-animate {
-  margin: 100px auto;
-  border:16px solid #f3f3f3;
-  border-radius:50%;
-  border-top:16px solid #2842d8;
-  width:130px;
-  height:130px;
+  height: 100vh;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  animation:rotate 2s linear infinite;
   font-size: 12px;
 }
-@keyframes rotate{
-  0%{
-      transform: rotate(0deg);
-  }
-  100%{
-      transform:rotate(360deg);
-  }
-}
+
+@keyframes line-scale-pulse-out {
+  0% {
+    -webkit-transform: scaley(1);
+            transform: scaley(1); }
+  50% {
+    -webkit-transform: scaley(0.4);
+            transform: scaley(0.4); }
+  100% {
+    -webkit-transform: scaley(1);
+            transform: scaley(1); } }
+
+.line-scale-pulse-out > div {
+  background-color: #2842d8;
+  width: 4px;
+  height: 35px;
+  border-radius: 2px;
+  margin: 2px;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  display: inline-block;
+  -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
+          animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); }
+  .line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
+    -webkit-animation-delay: -0.4s !important;
+            animation-delay: -0.4s !important; }
+  .line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
+    -webkit-animation-delay: -0.2s !important;
+            animation-delay: -0.2s !important; }
 
 @import '~react-grid-layout/css/styles.css'; 
 @import '~react-resizable/css/styles.css';

readme.md

@@ -127,7 +127,6 @@ or
 cnpm run start
 ```
 
-
 ## How to run the downloaded code ?
 
  1. The compression package can be unzipped directly to the server root, and access to the root address is sufficient