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.

100 lines
2.2 KiB

  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. <title>pure-admin-thin</title>
  8. <script>
  9. window.process = {};
  10. </script>
  11. </head>
  12. <body>
  13. <div id="app">
  14. <style>
  15. html,
  16. body,
  17. #app {
  18. width: 100%;
  19. height: 100%;
  20. display: flex;
  21. position: relative;
  22. justify-content: center;
  23. align-items: center;
  24. overflow: hidden;
  25. }
  26. .loader,
  27. .loader:before,
  28. .loader:after {
  29. border-radius: 50%;
  30. width: 2.5em;
  31. height: 2.5em;
  32. -webkit-animation-fill-mode: both;
  33. animation-fill-mode: both;
  34. -webkit-animation: loadAnimation 1.8s infinite ease-in-out;
  35. animation: loadAnimation 1.8s infinite ease-in-out;
  36. }
  37. .loader {
  38. color: #406eeb;
  39. font-size: 10px;
  40. margin: 80px auto;
  41. position: relative;
  42. text-indent: -9999em;
  43. -webkit-transform: translateZ(0);
  44. -ms-transform: translateZ(0);
  45. transform: translateZ(0);
  46. -webkit-animation-delay: -0.16s;
  47. animation-delay: -0.16s;
  48. top: 0;
  49. transform: translate(-50%, 0);
  50. }
  51. .loader:before,
  52. .loader:after {
  53. content: "";
  54. position: absolute;
  55. top: 0;
  56. }
  57. .loader:before {
  58. left: -3.5em;
  59. -webkit-animation-delay: -0.32s;
  60. animation-delay: -0.32s;
  61. }
  62. .loader:after {
  63. left: 3.5em;
  64. }
  65. @-webkit-keyframes loadAnimation {
  66. 0%,
  67. 80%,
  68. 100% {
  69. box-shadow: 0 2.5em 0 -1.3em;
  70. }
  71. 40% {
  72. box-shadow: 0 2.5em 0 0;
  73. }
  74. }
  75. @keyframes loadAnimation {
  76. 0%,
  77. 80%,
  78. 100% {
  79. box-shadow: 0 2.5em 0 -1.3em;
  80. }
  81. 40% {
  82. box-shadow: 0 2.5em 0 0;
  83. }
  84. }
  85. </style>
  86. <div class="loader"></div>
  87. </div>
  88. <script type="module" src="/src/main.ts"></script>
  89. </body>
  90. </html>