From d0cab9bab57fe914dc8a46ea3f0fa505d81b9073 Mon Sep 17 00:00:00 2001
From: xujiang <xujiang156@qq.com>
Date: Sun, 14 Nov 2021 13:01:17 +0800
Subject: [PATCH] =?UTF-8?q?:new:=20=E9=87=8D=E6=9E=84=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/doc/package.json                     |  2 -
 .../editor/src/components/LoadingCp/index.tsx | 13 +++++-
 packages/editor/src/global.css                | 46 +++++++++++++------
 readme.md                                     |  1 -
 4 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/packages/doc/package.json b/packages/doc/package.json
index 8253eec..80e0a92 100644
--- a/packages/doc/package.json
+++ b/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": {
diff --git a/packages/editor/src/components/LoadingCp/index.tsx b/packages/editor/src/components/LoadingCp/index.tsx
index d436e9e..15336d9 100644
--- a/packages/editor/src/components/LoadingCp/index.tsx
+++ b/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>
+);
diff --git a/packages/editor/src/global.css b/packages/editor/src/global.css
index 5dcdca3..b232000 100644
--- a/packages/editor/src/global.css
+++ b/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';
diff --git a/readme.md b/readme.md
index 0301280..7f6e043 100644
--- a/readme.md
+++ b/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