index.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!DOCTYPE html>
  2. <html lang="">
  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.0" />
  7. <meta name="renderer" content="webkit" />
  8. <meta name="force-rendering" content="webkit" />
  9. <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
  10. <title><%= process.env.VUE_APP_TITLE %></title>
  11. <script>
  12. if (!!window.ActiveXObject || "ActiveXObject" in window) {
  13. window.location.href = "./ieIncompatible/index.html"
  14. }
  15. </script>
  16. </head>
  17. <body>
  18. <noscript>
  19. <strong>
  20. We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.
  21. </strong>
  22. </noscript>
  23. <div id="app">
  24. <style>
  25. .firstLoading {
  26. position: fixed;
  27. left: 50%;
  28. top: 50%;
  29. transform: translate(-50%, -50%);
  30. height: 58px;
  31. width: 58px;
  32. }
  33. .firstLoading .circular {
  34. display: inline;
  35. height: 100%;
  36. width: 100%;
  37. animation: loading-rotate 2s linear infinite;
  38. }
  39. .firstLoading .circular .path {
  40. animation: loading-dash 1.5s ease-in-out infinite;
  41. stroke-dasharray: 90, 150;
  42. stroke-dashoffset: 0;
  43. stroke-width: 4;
  44. stroke: #f5c42d;
  45. stroke-linecap: round;
  46. }
  47. @keyframes loading-rotate {
  48. to {
  49. transform: rotate(360deg);
  50. }
  51. }
  52. @keyframes loading-dash {
  53. 0% {
  54. stroke-dasharray: 1, 200;
  55. stroke-dashoffset: 0;
  56. }
  57. 50% {
  58. stroke-dasharray: 90, 150;
  59. stroke-dashoffset: -40px;
  60. }
  61. to {
  62. stroke-dasharray: 90, 150;
  63. stroke-dashoffset: -120px;
  64. }
  65. }
  66. </style>
  67. <div class="firstLoading">
  68. <svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none"></circle></svg>
  69. </div>
  70. </div>
  71. <!-- built files will be auto injected -->
  72. </body>
  73. </html>