From 8a1c55ec1a0ffcf03e076409550087c2cf8ae8a7 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期二, 26 十一月 2024 23:10:08 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
public/index.html | 193 ++++-------------------------------------------
1 files changed, 18 insertions(+), 175 deletions(-)
diff --git a/public/index.html b/public/index.html
index 4eb7b43..a7ae724 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,186 +23,29 @@
padding: 0.2em 0;
}
- #loader-wrapper {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 999999;
+ .loader {
+ width: 150px; /* 鍘熸潵鐨�50px * 3 */
+ aspect-ratio: 1; /* 淇濇寔瀹介珮姣� */
+ color: #54f3f3;
+ --_c: no-repeat radial-gradient(farthest-side, currentColor 92%, #0000);
+ background:
+ var(--_c) 50% 0 / 36px 36px, /* 鍘熸潵鐨�12px * 3 */
+ var(--_c) 50% 100% / 36px 36px,
+ var(--_c) 100% 50% / 36px 36px,
+ var(--_c) 0 50% / 36px 36px,
+ var(--_c) 50% 50% / 36px 36px,
+ conic-gradient(from 90deg at 12px 12px, #0000 90deg, currentColor 0)
+ -12px -12px / calc(150% + 6px) calc(150% + 6px); /* 璋冩暣涓績鐐瑰拰灏哄 */
+ animation: l8 1s infinite linear;
}
-
- #loader {
- display: block;
- position: relative;
- left: 50%;
- top: 50%;
- width: 150px;
- height: 150px;
- margin: -75px 0 0 -75px;
- border-radius: 50%;
- border: 3px solid transparent;
- border-top-color: #FFF;
- -webkit-animation: spin 2s linear infinite;
- -ms-animation: spin 2s linear infinite;
- -moz-animation: spin 2s linear infinite;
- -o-animation: spin 2s linear infinite;
- animation: spin 2s linear infinite;
- z-index: 1001;
- }
-
- #loader:before {
- content: "";
- position: absolute;
- top: 5px;
- left: 5px;
- right: 5px;
- bottom: 5px;
- border-radius: 50%;
- border: 3px solid transparent;
- border-top-color: #FFF;
- -webkit-animation: spin 3s linear infinite;
- -moz-animation: spin 3s linear infinite;
- -o-animation: spin 3s linear infinite;
- -ms-animation: spin 3s linear infinite;
- animation: spin 3s linear infinite;
- }
-
- #loader:after {
- content: "";
- position: absolute;
- top: 15px;
- left: 15px;
- right: 15px;
- bottom: 15px;
- border-radius: 50%;
- border: 3px solid transparent;
- border-top-color: #FFF;
- -moz-animation: spin 1.5s linear infinite;
- -o-animation: spin 1.5s linear infinite;
- -ms-animation: spin 1.5s linear infinite;
- -webkit-animation: spin 1.5s linear infinite;
- animation: spin 1.5s linear infinite;
- }
-
-
- @-webkit-keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
-
- @keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
-
-
- #loader-wrapper .loader-section {
- position: fixed;
- top: 0;
- width: 51%;
- height: 100%;
- background: #7171C6;
- z-index: 1000;
- -webkit-transform: translateX(0);
- -ms-transform: translateX(0);
- transform: translateX(0);
- }
-
- #loader-wrapper .loader-section.section-left {
- left: 0;
- }
-
- #loader-wrapper .loader-section.section-right {
- right: 0;
- }
-
-
- .loaded #loader-wrapper .loader-section.section-left {
- -webkit-transform: translateX(-100%);
- -ms-transform: translateX(-100%);
- transform: translateX(-100%);
- -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- }
-
- .loaded #loader-wrapper .loader-section.section-right {
- -webkit-transform: translateX(100%);
- -ms-transform: translateX(100%);
- transform: translateX(100%);
- -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- }
-
- .loaded #loader {
- opacity: 0;
- -webkit-transition: all 0.3s ease-out;
- transition: all 0.3s ease-out;
- }
-
- .loaded #loader-wrapper {
- visibility: hidden;
- -webkit-transform: translateY(-100%);
- -ms-transform: translateY(-100%);
- transform: translateY(-100%);
- -webkit-transition: all 0.3s 1s ease-out;
- transition: all 0.3s 1s ease-out;
- }
-
- .no-js #loader-wrapper {
- display: none;
- }
-
- .no-js h1 {
- color: #222222;
- }
-
- #loader-wrapper .load_title {
- font-family: 'Open Sans';
- color: #FFF;
- font-size: 19px;
- width: 100%;
- text-align: center;
- z-index: 9999999999999;
- position: absolute;
- top: 60%;
- opacity: 1;
- line-height: 30px;
- }
-
- #loader-wrapper .load_title span {
- font-weight: normal;
- font-style: italic;
- font-size: 13px;
- color: #FFF;
- opacity: 0.5;
- }
+ @keyframes l8 {to{transform: rotate(.5turn)}}
</style>
</head>
<body>
<div id="app">
- <div id="loader-wrapper">
- <div id="loader"></div>
- <div class="loader-section section-left"></div>
- <div class="loader-section section-right"></div>
- <div class="load_title">姝ｅ湪鍔犺浇绯荤粺璧勬簮锛岃鑰愬績绛夊緟</div>
- </div>
+ <div style="display: flex;justify-content: center;align-items: center;height: 100%">
+ <div class="loader"></div>
+ </div>
</div>
</body>
</html>
--
Gitblit v1.8.0