index.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  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. </head>
  10. <body>
  11. <div id="app">
  12. <style>
  13. .app-loading {
  14. display: flex;
  15. width: 100%;
  16. height: 100%;
  17. justify-content: center;
  18. align-items: center;
  19. flex-direction: column;
  20. background-color: #f4f7f9;
  21. }
  22. .app-loading .app-loading-wrap {
  23. position: absolute;
  24. top: 50%;
  25. left: 50%;
  26. display: flex;
  27. transform: translate3d(-50%, -50%, 0);
  28. justify-content: center;
  29. align-items: center;
  30. flex-direction: column;
  31. }
  32. .loader {
  33. width: 48px;
  34. height: 48px;
  35. margin: auto;
  36. position: relative;
  37. }
  38. .loader:before {
  39. content: "";
  40. width: 48px;
  41. height: 5px;
  42. background: #f0808050;
  43. position: absolute;
  44. top: 60px;
  45. left: 0;
  46. border-radius: 50%;
  47. animation: shadow324 0.5s linear infinite;
  48. }
  49. .loader:after {
  50. content: "";
  51. width: 100%;
  52. height: 100%;
  53. background: #f08080;
  54. position: absolute;
  55. top: 0;
  56. left: 0;
  57. border-radius: 4px;
  58. animation: jump7456 0.5s linear infinite;
  59. }
  60. @keyframes jump7456 {
  61. 15% {
  62. border-bottom-right-radius: 3px;
  63. }
  64. 25% {
  65. transform: translateY(9px) rotate(22.5deg);
  66. }
  67. 50% {
  68. transform: translateY(18px) scale(1, 0.9) rotate(45deg);
  69. border-bottom-right-radius: 40px;
  70. }
  71. 75% {
  72. transform: translateY(9px) rotate(67.5deg);
  73. }
  74. 100% {
  75. transform: translateY(0) rotate(90deg);
  76. }
  77. }
  78. @keyframes shadow324 {
  79. 0%,
  80. 100% {
  81. transform: scale(1, 1);
  82. }
  83. 50% {
  84. transform: scale(1.2, 1);
  85. }
  86. }
  87. </style>
  88. <div class="app-loading">
  89. <div class="app-loading-wrap">
  90. <div class="loader"></div>
  91. </div>
  92. </div>
  93. </div>
  94. <script type="module" src="/src/main.ts"></script>
  95. </body>
  96. </html>