index.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7. <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8. <title><%= webpackConfig.name %></title>
  9. <style type="text/css">
  10. .global-loader {
  11. background: #000;
  12. background: -webkit-radial-gradient(#222, #000);
  13. background: radial-gradient(#222, #000);
  14. bottom: 0;
  15. left: 0;
  16. right: 0;
  17. top: 0;
  18. overflow: hidden;
  19. position: fixed;
  20. z-index: 99999;
  21. }
  22. .global-loader .loader-inner {
  23. bottom: 0;
  24. height: 60px;
  25. left: 0;
  26. margin: auto;
  27. position: absolute;
  28. right: 0;
  29. top: 0;
  30. width: 100px;
  31. }
  32. .global-loader .loader-line-wrap {
  33. -webkit-animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
  34. animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
  35. box-sizing: border-box;
  36. height: 50px;
  37. left: 0;
  38. overflow: hidden;
  39. position: absolute;
  40. top: 0;
  41. -webkit-transform-origin: 50% 100%;
  42. transform-origin: 50% 100%;
  43. width: 100px;
  44. }
  45. .global-loader .loader-line {
  46. border: 4px solid transparent;
  47. border-radius: 100%;
  48. box-sizing: border-box;
  49. height: 100px;
  50. left: 0;
  51. margin: 0 auto;
  52. position: absolute;
  53. right: 0;
  54. top: 0;
  55. width: 100px;
  56. }
  57. .global-loader .loader-line-wrap:nth-child(1) {
  58. -webkit-animation-delay: -50ms;
  59. animation-delay: -50ms;
  60. }
  61. .global-loader .loader-line-wrap:nth-child(2) {
  62. -webkit-animation-delay: -100ms;
  63. animation-delay: -100ms;
  64. }
  65. .global-loader .loader-line-wrap:nth-child(3) {
  66. -webkit-animation-delay: -150ms;
  67. animation-delay: -150ms;
  68. }
  69. .global-loader .loader-line-wrap:nth-child(4) {
  70. -webkit-animation-delay: -200ms;
  71. animation-delay: -200ms;
  72. }
  73. .global-loader .loader-line-wrap:nth-child(5) {
  74. -webkit-animation-delay: -250ms;
  75. animation-delay: -250ms;
  76. }
  77. .global-loader .loader-line-wrap:nth-child(1) .loader-line {
  78. border-color: hsl(0, 80%, 60%);
  79. height: 90px;
  80. width: 90px;
  81. top: 7px;
  82. }
  83. .global-loader .loader-line-wrap:nth-child(2) .loader-line {
  84. border-color: hsl(60, 80%, 60%);
  85. height: 76px;
  86. width: 76px;
  87. top: 14px;
  88. }
  89. .global-loader .loader-line-wrap:nth-child(3) .loader-line {
  90. border-color: hsl(120, 80%, 60%);
  91. height: 62px;
  92. width: 62px;
  93. top: 21px;
  94. }
  95. .global-loader .loader-line-wrap:nth-child(4) .loader-line {
  96. border-color: hsl(180, 80%, 60%);
  97. height: 48px;
  98. width: 48px;
  99. top: 28px;
  100. }
  101. .global-loader .loader-line-wrap:nth-child(5) .loader-line {
  102. border-color: hsl(240, 80%, 60%);
  103. height: 34px;
  104. width: 34px;
  105. top: 35px;
  106. }
  107. @-webkit-keyframes spin {
  108. 0%, 15% {
  109. -webkit-transform: rotate(0);
  110. transform: rotate(0);
  111. }
  112. 100% {
  113. -webkit-transform: rotate(360deg);
  114. transform: rotate(360deg);
  115. }
  116. }
  117. @keyframes spin {
  118. 0%, 15% {
  119. -webkit-transform: rotate(0);
  120. transform: rotate(0);
  121. }
  122. 100% {
  123. -webkit-transform: rotate(360deg);
  124. transform: rotate(360deg);
  125. }
  126. }
  127. </style>
  128. <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=2GCBZ-ANVKB-GB3U6-J7N7U-BL273-RMFKG"></script>
  129. </head>
  130. <body>
  131. <noscript>
  132. <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  133. </noscript>
  134. <div id="app">
  135. <div class="global-loader">
  136. <div class="loader-inner">
  137. <div class="loader-line-wrap">
  138. <div class="loader-line"></div>
  139. </div>
  140. <div class="loader-line-wrap">
  141. <div class="loader-line"></div>
  142. </div>
  143. <div class="loader-line-wrap">
  144. <div class="loader-line"></div>
  145. </div>
  146. <div class="loader-line-wrap">
  147. <div class="loader-line"></div>
  148. </div>
  149. <div class="loader-line-wrap">
  150. <div class="loader-line"></div>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. <!-- built files will be auto injected -->
  156. </body>
  157. </html>