From 47b70dbc4265fe777de3c2f0f061c1e24b5b968a Mon Sep 17 00:00:00 2001
From: "chen.home" <1147347984@qq.com>
Date: Wed, 7 Sep 2022 23:39:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(styles):=20=E5=A2=9E=E5=8A=A0=E9=A1=B9?=
=?UTF-8?q?=E7=9B=AE=E5=8A=A0=E8=BD=BDloading=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 11 +++++++
public/resource/loading.css | 63 +++++++++++++++++++++++++++++++++++++
src/main.ts | 7 ++++-
3 files changed, 80 insertions(+), 1 deletion(-)
create mode 100644 public/resource/loading.css
diff --git a/index.html b/index.html
index 10a2deb..dd150de 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,21 @@
+
<%= title %>
+
diff --git a/public/resource/loading.css b/public/resource/loading.css
new file mode 100644
index 0000000..a535996
--- /dev/null
+++ b/public/resource/loading.css
@@ -0,0 +1,63 @@
+#loading-container{
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.app-loading {
+ width: 88px;
+ height: 88px;
+ animation: app-loading-y0fdc1 2s infinite ease;
+ transform-style: preserve-3d;
+}
+
+.app-loading > div {
+ background-color: rgba(0, 77, 255, 0.2);
+ height: 100%;
+ position: absolute;
+ width: 100%;
+ border: 2px solid #004dff;
+}
+
+.app-loading div:nth-of-type(1) {
+ transform: translateZ(-44px) rotateY(180deg);
+}
+
+.app-loading div:nth-of-type(2) {
+ transform: rotateY(-270deg) translateX(50%);
+ transform-origin: top right;
+}
+
+.app-loading div:nth-of-type(3) {
+ transform: rotateY(270deg) translateX(-50%);
+ transform-origin: center left;
+}
+
+.app-loading div:nth-of-type(4) {
+ transform: rotateX(90deg) translateY(-50%);
+ transform-origin: top center;
+}
+
+.app-loading div:nth-of-type(5) {
+ transform: rotateX(-90deg) translateY(50%);
+ transform-origin: bottom center;
+}
+
+.app-loading div:nth-of-type(6) {
+ transform: translateZ(44px);
+}
+
+@keyframes app-loading-y0fdc1 {
+ 0% {
+ transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
+ }
+
+ 50% {
+ transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
+ }
+
+ 100% {
+ transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
+ }
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 6c0897c..4594a3c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,6 +14,11 @@ async function setupApp() {
// 安装router
await setupRouter(app);
// 挂载
- app.mount('#app');
+ await app.mount('#app');
+ closeAppLoading();
}
setupApp();
+
+function closeAppLoading() {
+ document.querySelector('#loading-container')!.remove();
+}