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="通防软件包管理系统" />
  8. <title>通防软件包管理系统</title>
  9. </head>
  10. <body>
  11. <div id="app">
  12. <div class="loader"></div>
  13. </div>
  14. </body>
  15. <script type="module" src="/src/main.ts"></script>
  16. <style>
  17. html,
  18. body,
  19. #app {
  20. position: relative;
  21. display: flex;
  22. align-items: center;
  23. justify-content: center;
  24. width: 100%;
  25. height: 100%;
  26. }
  27. .loader {
  28. --d: 22px;
  29. width: 4px;
  30. height: 4px;
  31. color: #25b09b;
  32. border-radius: 50%;
  33. box-shadow:
  34. calc(1 * var(--d)) calc(0 * var(--d)) 0 0,
  35. calc(0.707 * var(--d)) calc(0.707 * var(--d)) 0 1px,
  36. calc(0 * var(--d)) calc(1 * var(--d)) 0 2px,
  37. calc(-0.707 * var(--d)) calc(0.707 * var(--d)) 0 3px,
  38. calc(-1 * var(--d)) calc(0 * var(--d)) 0 4px,
  39. calc(-0.707 * var(--d)) calc(-0.707 * var(--d)) 0 5px,
  40. calc(0 * var(--d)) calc(-1 * var(--d)) 0 6px;
  41. animation: l27 1s infinite steps(8);
  42. }
  43. @keyframes l27 {
  44. 100% {
  45. transform: rotate(1turn);
  46. }
  47. }
  48. </style>
  49. </html>