index.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!doctype html>
  2. <html lang="">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" href="/favicon.ico" />
  6. <meta
  7. name="viewport"
  8. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
  9. />
  10. <title>Local Block</title>
  11. <style type="text/css">
  12. /* HTML: <div class="loader"></div> */
  13. #Loading,
  14. #Loading > div {
  15. position: relative;
  16. box-sizing: border-box;
  17. }
  18. #Loading {
  19. width: 100vw;
  20. height: 100vh;
  21. top: 50%;
  22. left: 50%;
  23. position: absolute;
  24. transform: translateY(-50%) translateX(-50%);
  25. z-index: 100;
  26. display: block;
  27. font-size: 0;
  28. color: #4F4F4F;
  29. }
  30. #Loading.la-dark {
  31. color: #333;
  32. }
  33. #Loading > div {
  34. display: inline-block;
  35. float: none;
  36. background-color: currentColor;
  37. border: 0 solid currentColor;
  38. }
  39. #Loading {
  40. width: 32px;
  41. height: 32px;
  42. }
  43. #Loading > div:nth-child(1),
  44. #Loading > div:nth-child(2) {
  45. position: absolute;
  46. left: 0;
  47. width: 100%;
  48. }
  49. #Loading > div:nth-child(1) {
  50. top: -25%;
  51. z-index: 1;
  52. height: 100%;
  53. border-radius: 10%;
  54. animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
  55. }
  56. #Loading > div:nth-child(2) {
  57. bottom: -9%;
  58. height: 10%;
  59. background: #000;
  60. border-radius: 50%;
  61. opacity: 0.2;
  62. animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
  63. }
  64. #Loading.la-sm {
  65. width: 16px;
  66. height: 16px;
  67. }
  68. #Loading.la-2x {
  69. width: 64px;
  70. height: 64px;
  71. }
  72. #Loading.la-3x {
  73. width: 96px;
  74. height: 96px;
  75. }
  76. @keyframes square-jelly-box-animate {
  77. 17% {
  78. border-bottom-right-radius: 10%;
  79. }
  80. 25% {
  81. transform: translateY(25%) rotate(22.5deg);
  82. }
  83. 50% {
  84. border-bottom-right-radius: 100%;
  85. transform: translateY(50%) scale(1, 0.9) rotate(45deg);
  86. }
  87. 75% {
  88. transform: translateY(25%) rotate(67.5deg);
  89. }
  90. 100% {
  91. transform: translateY(0) rotate(90deg);
  92. }
  93. }
  94. @keyframes square-jelly-box-shadow {
  95. 50% {
  96. transform: scale(1.25, 1);
  97. }
  98. }
  99. </style>
  100. </head>
  101. <body>
  102. <div id="Loading">
  103. <div></div>
  104. <div></div>
  105. </div>
  106. <div id="app"></div>
  107. <script type="module" src="/src/main.js"></script>
  108. </body>
  109. </html>