index.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  8. <meta name="description" content="Vite Starter Template By Kirk Lin" />
  9. <script type="module" crossorigin src="/assets/index-cnJriAAq.js"></script>
  10. <link rel="stylesheet" crossorigin href="/assets/index-CIAXXiuA.css">
  11. <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
  12. <body>
  13. <div id="app">
  14. <style>
  15. .app-loading {
  16. display: flex;
  17. width: 100%;
  18. height: 100%;
  19. justify-content: center;
  20. align-items: center;
  21. flex-direction: column;
  22. background-color: #f4f7f9;
  23. }
  24. .app-loading .app-loading-wrap {
  25. position: absolute;
  26. top: 50%;
  27. left: 50%;
  28. display: flex;
  29. transform: translate3d(-50%, -50%, 0);
  30. justify-content: center;
  31. align-items: center;
  32. flex-direction: column;
  33. }
  34. .loader {
  35. width: 48px;
  36. height: 48px;
  37. margin: auto;
  38. position: relative;
  39. }
  40. .loader:before {
  41. content: "";
  42. width: 48px;
  43. height: 5px;
  44. background: #f0808050;
  45. position: absolute;
  46. top: 60px;
  47. left: 0;
  48. border-radius: 50%;
  49. animation: shadow324 0.5s linear infinite;
  50. }
  51. .loader:after {
  52. content: "";
  53. width: 100%;
  54. height: 100%;
  55. background: #f08080;
  56. position: absolute;
  57. top: 0;
  58. left: 0;
  59. border-radius: 4px;
  60. animation: jump7456 0.5s linear infinite;
  61. }
  62. @keyframes jump7456 {
  63. 15% {
  64. border-bottom-right-radius: 3px;
  65. }
  66. 25% {
  67. transform: translateY(9px) rotate(22.5deg);
  68. }
  69. 50% {
  70. transform: translateY(18px) scale(1, 0.9) rotate(45deg);
  71. border-bottom-right-radius: 40px;
  72. }
  73. 75% {
  74. transform: translateY(9px) rotate(67.5deg);
  75. }
  76. 100% {
  77. transform: translateY(0) rotate(90deg);
  78. }
  79. }
  80. @keyframes shadow324 {
  81. 0%,
  82. 100% {
  83. transform: scale(1, 1);
  84. }
  85. 50% {
  86. transform: scale(1.2, 1);
  87. }
  88. }
  89. </style>
  90. <div class="app-loading">
  91. <div class="app-loading-wrap">
  92. <div class="loader"></div>
  93. </div>
  94. </div>
  95. </div>
  96. </body>
  97. </html>