You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

104 lines
2.3 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" href="/favicon.ico" />
  6. <link rel="stylesheet" href="/iconfont.css" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <title>pure-admin-thin</title>
  9. <script src="/sortable.min.js"></script>
  10. <script>
  11. window.process = {};
  12. </script>
  13. </head>
  14. <body>
  15. <div id="app">
  16. <style>
  17. * {
  18. margin: 0;
  19. padding: 0;
  20. }
  21. html,
  22. body {
  23. width: 100%;
  24. height: 100%;
  25. display: flex;
  26. justify-content: center;
  27. align-items: center;
  28. overflow: hidden;
  29. font-family: "Reggae One", cursive;
  30. }
  31. .loader,
  32. .loader:before,
  33. .loader:after {
  34. border-radius: 50%;
  35. width: 2.5em;
  36. height: 2.5em;
  37. -webkit-animation-fill-mode: both;
  38. animation-fill-mode: both;
  39. -webkit-animation: loadAnimation 1.8s infinite ease-in-out;
  40. animation: loadAnimation 1.8s infinite ease-in-out;
  41. }
  42. .loader {
  43. color: #406eeb;
  44. font-size: 10px;
  45. margin: 80px auto;
  46. position: relative;
  47. text-indent: -9999em;
  48. -webkit-transform: translateZ(0);
  49. -ms-transform: translateZ(0);
  50. transform: translateZ(0);
  51. -webkit-animation-delay: -0.16s;
  52. animation-delay: -0.16s;
  53. }
  54. .loader:before,
  55. .loader:after {
  56. content: "";
  57. position: absolute;
  58. top: 0;
  59. }
  60. .loader:before {
  61. left: -3.5em;
  62. -webkit-animation-delay: -0.32s;
  63. animation-delay: -0.32s;
  64. }
  65. .loader:after {
  66. left: 3.5em;
  67. }
  68. @-webkit-keyframes loadAnimation {
  69. 0%,
  70. 80%,
  71. 100% {
  72. box-shadow: 0 2.5em 0 -1.3em;
  73. }
  74. 40% {
  75. box-shadow: 0 2.5em 0 0;
  76. }
  77. }
  78. @keyframes loadAnimation {
  79. 0%,
  80. 80%,
  81. 100% {
  82. box-shadow: 0 2.5em 0 -1.3em;
  83. }
  84. 40% {
  85. box-shadow: 0 2.5em 0 0;
  86. }
  87. }
  88. </style>
  89. <div class="loader">Loading...</div>
  90. </div>
  91. <script type="module" src="/src/main.ts"></script>
  92. </body>
  93. </html>