feat(page): loading title can custom title

zmtlwzy · Oct 22, 2022 · 0db94f8 · 0db94f8
1 parent 0f2f2cd
commit 0db94f8
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 266 deletions.
diff --git a/index.html b/index.html
@@ -8,186 +8,13 @@
     <meta http-equiv="pragma" content="no-cache">
     <meta http-equiv="expires" content="0">
     <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
+
     <title><%= title %></title>
   </head>
   <body>
     <div id="app" class="font-sans">
-      <div class="loading-wrapper">
-        <svg
-          class="app-logo"
-          viewBox="0 0 195 195"
-          version="1.1"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g id="Octagonal">
-            <g>
-              <path
-                d="M93.4628 0.915623L33.5628 24.7156C30.3628 26.0156 27.8628 28.4156 26.4628 31.6156L1.06285 90.7156C-0.337153 93.8156 -0.337153 97.4156 0.962847 100.616L24.7628 160.416C26.0628 163.616 28.4628 166.116 31.6628 167.516L90.7628 193.016C93.8628 194.416 97.4628 194.416 100.663 193.116L160.463 169.316C163.663 168.016 166.163 165.616 167.563 162.416L193.063 103.316C194.463 100.216 194.463 96.6156 193.163 93.4156L169.363 33.6156C168.063 30.4156 165.663 27.9156 162.463 26.5156L103.263 1.11562C100.163 -0.284377 96.5629 -0.384377 93.4628 0.915623L93.4628 0.915623L93.4628 0.915623L93.4628 0.915623Z"
-                id="Shape"
-                fill="#0064F0"
-                fill-rule="evenodd"
-                stroke="none"
-              />
-              <path
-                d="M161.6 81.8C161.6 117.1 103 163.5 78.5 164.2C36.4 165.4 0 105.9 0 65.8C0 24.6 47.4 0 80 0C118.6 0.0999985 161.6 46.7 161.6 81.8L161.6 81.8L161.6 81.8L161.6 81.8Z"
-                transform="translate(18.462854 12.415625)"
-                id="Shape#1"
-                fill="#103CF5"
-                fill-rule="evenodd"
-                stroke="none"
-              />
-              <path
-                d="M25.9353 14.9432C29.2353 2.34315 50.4353 -7.65685 72.5353 8.04315C94.6353 23.7431 86.5353 32.9432 107.335 45.5432C132.735 61.0432 141.935 63.0431 132.635 87.0431C123.335 111.043 113.335 119.243 97.1353 130.343C80.9353 141.443 61.6353 139.043 46.9353 130.343C32.2353 121.643 11.9353 99.9432 5.53533 91.6432C-0.864668 83.3432 -2.76467 67.2432 5.53533 52.5432C13.8353 37.8432 20.4353 36.1432 25.9353 14.9432L25.9353 14.9432L25.9353 14.9432L25.9353 14.9432Z"
-                transform="translate(31.127518 23.972477)"
-                id="Shape#2"
-                fill="#0537C4"
-                fill-rule="evenodd"
-                stroke="none"
-              />
-            </g>
-          </g>
-          <g id="Z" transform="matrix(1.2675908E-06 1 -1 1.2675908E-06 143.49991 52)">
-            <path
-              d="M24.9581 79.4823L12.385 90.9453C12.3356 90.982 12.2842 91.0161 12.231 91.0472L12.1839 91.0811L12.0984 91.1321C9.81813 92.5107 6.89378 92.225 4.9283 90.4315L4.1711 89.7735L0 85.9907L0 15.9989C0.068453 15.4088 0.171117 14.8187 0.28663 14.2412C0.586093 12.7341 1.92084 11.9869 2.93901 11.0444C5.15077 9.00656 7.43097 7.04512 9.68552 5.04972C11.2384 3.67418 12.7871 2.29439 14.3528 0.927316C15.7175 -0.265679 18.3614 -0.206238 19.6448 0.532482C19.9701 0.720903 20.2693 0.950684 20.5346 1.21601L21.9807 2.60005L23.1485 3.70813L24.2137 4.7313C24.5024 4.9957 24.7582 5.29362 24.9752 5.61863C25.4803 6.44356 25.7331 7.3964 25.7025 8.36123C25.6811 14.5852 25.7282 20.8091 25.741 27.0416C25.7667 37.613 25.7895 48.1843 25.8095 58.7557C25.8095 64.1729 25.8194 69.5888 25.8394 75.0033C25.8394 75.2538 25.8394 75.5 25.8394 75.7463C25.9036 77.3596 25.8694 78.4252 24.9581 79.4823L24.9581 79.4823L24.9581 79.4823L24.9581 79.4823Z"
-              transform="translate(63.100014 3.8146973E-06)"
-              id="Shape#3"
-              fill="#B0D1FF"
-              fill-rule="evenodd"
-              stroke="none"
-            />
-            <path
-              d="M25.8233 38.5926C25.7747 38.976 25.7603 39.3628 25.7804 39.7486C25.7804 50.5063 25.7804 61.2641 25.8618 72.0177L25.8618 75.8483C25.7666 77.6972 24.8458 79.4099 23.3462 80.5268C20.4277 82.9274 17.7064 85.5514 14.8908 88.0743C13.7123 89.1289 12.5423 90.1836 11.3295 91.2129C10.1168 92.2423 6.99687 92.3689 5.26979 90.9472C3.95568 89.8244 2.73206 88.6029 1.60996 87.2937C0.619793 86.3184 0.0476151 85.0062 0.0114288 83.6277C0.0114288 83.3239 -0.014286 82.9907 0.0114288 82.6236C0.0114288 81.9908 0.0114288 81.358 0.032856 80.721C0.0542831 78.9069 0.032856 77.0886 0.032856 75.2746L0.032856 16.111C0.0291405 15.6588 0.0838661 15.2081 0.195713 14.7694C0.309414 14.388 0.452682 14.0156 0.624264 13.6557C0.864666 13.1269 1.15447 12.6214 1.48994 12.1453L8.34681 5.39543L12.7138 1.10076C12.9461 0.869587 13.2118 0.673415 13.5023 0.518568C13.9256 0.284191 14.3944 0.14043 14.878 0.0966933L14.878 0.0966933C16.3122 -0.163381 17.7935 0.105432 19.0393 0.851848L19.0393 0.851848C19.3587 1.04378 19.6587 1.26559 19.935 1.51419L25.8618 6.75386L25.8618 38.3945C25.8443 38.4595 25.8314 38.5257 25.8233 38.5926L25.8233 38.5926L25.8233 38.5926L25.8233 38.5926Z"
-              transform="translate(0 0.49991608)"
-              id="Shape#4"
-              fill="#B0D1FF"
-              fill-rule="evenodd"
-              stroke="none"
-            />
-            <path
-              d="M37.1514 38.8685C37.2118 38.4309 37.2448 37.9884 37.25 37.5447L37.25 78.9L19.3621 59.0842L10.3624 49.1426L4.94552 43.1101L2.53704 40.4466L1.64994 39.4656L1.58565 39.398C1.36709 39.1853 1.15709 38.962 0.955673 38.7595C0.754257 38.557 0.578552 38.3806 0.338554 38.4688C0.167458 38.5447 0.039917 38.7207 0 38.936L0 0L0.18428 0.202464L3.85699 4.22585C5.78977 6.30245 7.73969 8.37904 9.66821 10.4556C12.4109 13.432 15.1451 16.4258 17.8707 19.4369C20.0278 21.811 22.182 24.1888 24.3334 26.5699C26.9047 29.4097 29.4417 32.2805 32.013 35.0995C33.1701 36.3663 34.3358 37.607 35.5058 38.853C35.7543 39.1177 35.9986 39.372 36.2515 39.642C36.4252 39.7951 36.6513 39.8303 36.8514 39.7354C36.9702 39.6559 37.0569 39.5207 37.0914 39.3616C37.1256 39.1644 37.1256 39.0295 37.1514 38.8685L37.1514 38.8685L37.1514 38.8685L37.1514 38.8685Z"
-              transform="translate(25.877909 7.1999893)"
-              id="Shape#5"
-              fill="#89A1C1"
-              fill-rule="evenodd"
-              stroke="none"
-            />
-          </g>
-        </svg>
-        <div class="app-title">
-          <div class="l-1 letter">Z</div>
-          <div class="l-2 letter">m</div>
-          <div class="l-3 letter">t</div>
-          <div class="l-4 letter">l</div>
-          <div class="l-5 letter">w</div>
-          <div class="l-6 letter">z</div>
-          <div class="l-7 letter">y</div>
-          &nbsp;
-          <div class="l-8 letter">A</div>
-          <div class="l-9 letter">d</div>
-          <div class="l-10 letter">m</div>
-          <div class="l-11 letter">i</div>
-          <div class="l-12 letter">n</div>
-        </div>
-      </div>
-      <style>
-        #app .loading-wrapper {
-          position: fixed;
-          left: 0;
-          top: 0;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          width: 100%;
-          height: 100%;
-          font-size: 140px;
-          background-color: #f5f4f5;
-        }
-
-        #app .loading-wrapper .app-logo {
-          width: 1em;
-          height: 1em;
-        }
-
-        #app .loading-wrapper .app-title {
-          display: flex;
-          font-family: 'Segoe UI';
-          font-weight: 600;
-          line-height: 1;
-          font-size: 32px;
-          margin-top: 16px;
-          color: #617eef;
-        }
-
-        .letter {
-          letter-spacing: 1px;
-          animation-name: opacity;
-          animation-duration: 3s;
-          animation-iteration-count: infinite;
-          animation-timing-function: ease;
-        }
-
-        .l-1 {
-          animation-delay: 0.28s;
-        }
-
-        .l-2 {
-          animation-delay: 0.4s;
-        }
-
-        .l-3 {
-          animation-delay: 0.52s;
-        }
-
-        .l-4 {
-          animation-delay: 0.64s;
-        }
-
-        .l-5 {
-          animation-delay: 0.76s;
-        }
-
-        .l-6 {
-          animation-delay: 0.88s;
-        }
-
-        .l-7 {
-          animation-delay: 1s;
-        }
-
-        .l-8 {
-          animation-delay: 1.12s;
-        }
-
-        .l-9 {
-          animation-delay: 1.24s;
-        }
-
-        .l-10 {
-          animation-delay: 1.36s;
-        }
-
-        .l-11 {
-          animation-delay: 1.48s;
-        }
-
-        .l-12 {
-            animation-delay: 1.6s;
-        }
-
-        @keyframes opacity {
-          30% {
-            transform: translateX(1px);
-            opacity: 0;
-          }
-
-          55% {
-            transform: translateX(0);
-            opacity: 1;
-          }
-        }
-      </style>
+      <div class="app-loading-wrapper"></div>
+      <script src="/resource/loading.js"></script>
     </div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/public/resource/loading.css b/public/resource/loading.css
@@ -1,4 +1,4 @@
-#app .loading-wrapper {
+#app .app-loading-wrapper {
   position: fixed;
   left: 0;
   top: 0;
@@ -12,12 +12,12 @@
   background-color: #f5f4f5;
 }
 
-#app .loading-wrapper .app-logo {
+#app .app-loading-wrapper .app-logo {
   width: 1em;
   height: 1em;
 }
 
-#app .loading-wrapper .app-title {
+#app .app-loading-wrapper .app-title {
   display: flex;
   font-family: 'Segoe UI';
   font-weight: 600;
@@ -27,64 +27,14 @@
   color: #617eef;
 }
 
-.letter {
+#app .app-loading-wrapper .app-title-letter {
   letter-spacing: 1px;
   animation-name: opacity;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;
 }
 
-.l-1 {
-  animation-delay: 0.28s;
-}
-
-.l-2 {
-  animation-delay: 0.4s;
-}
-
-.l-3 {
-  animation-delay: 0.52s;
-}
-
-.l-4 {
-  animation-delay: 0.64s;
-}
-
-.l-5 {
-  animation-delay: 0.76s;
-}
-
-.l-6 {
-  animation-delay: 0.88s;
-  width: 2px;
-  height: 2px;
-}
-
-.l-7 {
-  animation-delay: 1s;
-}
-
-.l-8 {
-  animation-delay: 1.12s;
-}
-
-.l-9 {
-  animation-delay: 1.24s;
-}
-
-.l-10 {
-  animation-delay: 1.36s;
-}
-
-.l-11 {
-  animation-delay: 1.48s;
-}
-
-.l-12 {
-  animation-delay: 1.6s;
-}
-
 @keyframes opacity {
   30% {
     transform: translateX(1px);

diff --git a/public/resource/loading.js b/public/resource/loading.js