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();
+}