From f98d54e9f3c0b5b3ef3630f8c05eafd21cee9885 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期二, 03 十二月 2024 15:45:03 +0800
Subject: [PATCH] 初始状态 loading
---
index.html | 95 ++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 93 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index 99e4500..6c7e478 100644
--- a/index.html
+++ b/index.html
@@ -14,12 +14,103 @@
<script type="module" src="/static/config/featureConfig.js?v=202305725"></script>
<script type="module" src="/static/config/route.js?v=202305725"></script>
<script type="module" src="/index.js?v=20235075"></script>
-
-
+
+ <style>
+ .loading-next {
+ width: 100%;
+ height: 100%;
+ }
+ .loading-next .loading-next-box {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ .loading-next .loading-next-box-warp {
+ width: 80px;
+ height: 80px;
+ }
+ .loading-next .loading-next-box-warp .loading-next-box-item {
+ width: 33.333333%;
+ height: 33.333333%;
+ background: var(--el-color-primary);
+ float: left;
+ animation: loading-next-animation 1.2s infinite ease;
+ border-radius: 1px;
+ }
+ .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7) {
+ animation-delay: 0s;
+ }
+ .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),
+ .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8) {
+ animation-delay: 0.1s;
+ }
+ .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),
+ .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),
+ .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9) {
+ animation-delay: 0.2s;
+ }
+ .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),
+ .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6) {
+ animation-delay: 0.3s;
+ }
+ .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3) {
+ animation-delay: 0.4s;
+ }
+ @keyframes loading-next-animation {
+ 0%,
+ 70%,
+ 100% {
+ transform: scale3D(1, 1, 1);
+ }
+ 35% {
+ transform: scale3D(0, 0, 1);
+ }
+ }
+ </style>
</head>
<body>
<div id="app"></div>
+
<script type="module" src="/src/main.ts"></script>
+ <script>
+ const NextLoading = {
+ // 鍒涘缓 loading
+ start: () => {
+ const bodys = document.body;
+ const div = document.createElement('div');
+ div.setAttribute('class', 'loading-next');
+ const htmls = `
+ <div class="loading-next-box">
+ <div class="loading-next-box-warp">
+ <div class="loading-next-box-item"></div>
+ <div class="loading-next-box-item"></div>
+ <div class="loading-next-box-item"></div>
+ <div class="loading-next-box-item"></div>
+ <div class="loading-next-box-item"></div>
+ <div class="loading-next-box-item"></div>
+ <div class="loading-next-box-item"></div>
+ <div class="loading-next-box-item"></div>
+ <div class="loading-next-box-item"></div>
+ </div>
+ </div>
+ `;
+ div.innerHTML = htmls;
+ bodys.insertBefore(div, bodys.childNodes[0]);
+ window.nextLoading = true;
+ },
+ // 绉婚櫎 loading
+ done: (time = 0) => {
+ setTimeout(() => {
+ window.nextLoading = false;
+ const el = document.querySelector('.loading-next');
+ el?.parentNode?.removeChild(el);
+ }, time);
+ },
+ };
+
+ NextLoading.start();
+ </script>
</body>
</html>
--
Gitblit v1.9.3