index.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" href="/favicon.ico" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <meta name="description" content="Vue3 + Vite5 + TypeScript5 + Element-Plus 的后台管理模板" />
  8. <meta name="keywords" content="vue,element-plus,typescript" />
  9. <title>web-medical</title>
  10. </head>
  11. <body>
  12. <div id="app">
  13. <div class="loader"></div>
  14. </div>
  15. </body>
  16. <script type="module" src="/src/main.ts"></script>
  17. <style>
  18. html,
  19. body,
  20. #app {
  21. position: relative;
  22. display: flex;
  23. align-items: center;
  24. justify-content: center;
  25. width: 100%;
  26. height: 100%;
  27. }
  28. .loader {
  29. position: relative;
  30. width: 40px;
  31. aspect-ratio: 0.577;
  32. overflow: hidden;
  33. clip-path: polygon(0 0, 100% 100%, 0 100%, 100% 0);
  34. animation: l19 2s infinite linear;
  35. }
  36. .loader::before {
  37. position: absolute;
  38. inset: -150%;
  39. content: '';
  40. background: repeating-conic-gradient(from 30deg, #ffabab 0 60deg, #abe4ff 0 120deg, #ff7373 0 180deg);
  41. animation: inherit;
  42. animation-direction: reverse;
  43. }
  44. @keyframes l19 {
  45. 100% {
  46. transform: rotate(360deg);
  47. }
  48. }
  49. </style>
  50. </html>