index.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <link rel="shortcut icon" href="//4dkk.4dage.com/FDKKIMG/icon/kankan_icon.ico" />
  7. <title>%VITE_TITLE%</title>
  8. <style>
  9. .loading-container {
  10. position: fixed;
  11. top: 0;
  12. left: 0;
  13. width: 100%;
  14. height: 100%;
  15. display: flex;
  16. }
  17. .dark .loading-container {
  18. background-color: #232324;
  19. color: rgba(255, 255, 255, 0.9);
  20. }
  21. .loading-container .loading {
  22. --speed-of-animation: 0.9s;
  23. --gap: 12px;
  24. --first-color: #4c86f9;
  25. --second-color: #49a84c;
  26. --third-color: #f6bb02;
  27. --fourth-color: #26a69a;
  28. --fifth-color: #2196f3;
  29. margin: auto;
  30. width: 160px;
  31. height: 100px;
  32. display: flex;
  33. justify-content: center;
  34. align-items: center;
  35. gap: var(--gap);
  36. }
  37. .loading-container .loading span {
  38. width: 6px;
  39. height: 80px;
  40. background: var(--first-color);
  41. animation: scale var(--speed-of-animation) ease-in-out infinite;
  42. }
  43. .loading-container .loading span:nth-child(2) {
  44. background: var(--second-color);
  45. animation-delay: -0.8s;
  46. }
  47. .loading-container .loading span:nth-child(3) {
  48. background: var(--third-color);
  49. animation-delay: -0.7s;
  50. }
  51. .loading-container .loading span:nth-child(4) {
  52. background: var(--fourth-color);
  53. animation-delay: -0.6s;
  54. }
  55. .loading-container .loading span:nth-child(5) {
  56. background: var(--fifth-color);
  57. animation-delay: -0.5s;
  58. }
  59. @keyframes scale {
  60. 0%,
  61. 40%,
  62. 100% {
  63. transform: scaleY(0.25);
  64. }
  65. 20% {
  66. transform: scaleY(1);
  67. }
  68. }
  69. </style>
  70. </head>
  71. <body class="dark:text-#e9e9e9 auto-bg">
  72. <div id="app">
  73. <div class="loading-container">
  74. <div class="loading">
  75. <span></span>
  76. <span></span>
  77. <span></span>
  78. <span></span>
  79. <span></span>
  80. </div>
  81. </div>
  82. </div>
  83. <script type="module" src="/src/main.js"></script>
  84. </body>
  85. </html>