index.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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="renderer" content="webkit">
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  8. <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  9. <title><%= webpackConfig.name %></title>
  10. <style>
  11. html,
  12. body,
  13. #app {
  14. height: 100%;
  15. margin: 0px;
  16. padding: 0px;
  17. }
  18. #loader-wrapper {
  19. position: fixed;
  20. top: 0;
  21. left: 0;
  22. width: 100%;
  23. height: 100%;
  24. z-index: 999999;
  25. display: flex;
  26. flex-wrap: nowrap;
  27. align-content: center;
  28. justify-content: center;
  29. align-items: center;
  30. }
  31. #loader-wrapper .load_title {
  32. font-family: 'Open Sans';
  33. color: #FFF;
  34. font-size: 19px;
  35. width: 100%;
  36. text-align: center;
  37. z-index: 9999999999999;
  38. position: absolute;
  39. top: 49%;
  40. opacity: 1;
  41. line-height: 30px;
  42. }
  43. @keyframes mounthAni {
  44. 40% {
  45. stroke-dasharray: 44, 22;
  46. /* 间距改为1/4 */
  47. }
  48. 80%,
  49. 100% {
  50. stroke-dasharray: 44, 44;
  51. /* 间距恢复为1/2 */
  52. transform: rotate(720deg);
  53. }
  54. }
  55. @keyframes eyeAni {
  56. 40% {
  57. stroke-dasharray: 0, 77;
  58. /* 间距改为7/8 */
  59. }
  60. 80%,
  61. 100% {
  62. transform: rotate(675deg);
  63. /* 间距恢复为3/4 */
  64. stroke-dasharray: 0, 66;
  65. }
  66. }
  67. @keyframes dash {
  68. 0% {
  69. stroke-dashoffset: 2000;
  70. }
  71. 90% {
  72. stroke-dashoffset: 0;
  73. }
  74. }
  75. @keyframes loading22 {
  76. 60% {
  77. stroke-dashoffset: 1000;
  78. }
  79. 100% {
  80. stroke-dashoffset: 0;
  81. }
  82. }
  83. </style>
  84. </head>
  85. <body>
  86. <div id="app">
  87. <div id="loader-wrapper">
  88. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"
  89. viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
  90. <path opacity="0.2" fill="rgba(73,125,235,1)"
  91. d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
  92. s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
  93. c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path>
  94. <path fill="rgba(73,125,235,1)" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
  95. C22.32,8.481,24.301,9.057,26.013,10.047z" transform="rotate(42.1171 20 20)">
  96. <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20"
  97. to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>
  98. </path>
  99. </svg>
  100. </div>
  101. </div>
  102. </body>
  103. </html>