index.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  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. <link rel='stylesheet' href='luckysheet/plugins/css/pluginsCss.css' />
  11. <link rel='stylesheet' href='luckysheet/plugins/plugins.css' />
  12. <link rel='stylesheet' href='luckysheet/css/luckysheet.css' />
  13. <link rel='stylesheet' href='luckysheet/assets/iconfont/iconfont.css' />
  14. <script src="luckysheet/plugins/js/plugin.js"></script>
  15. <script src="luckysheet/luckysheet.umd.js"></script>
  16. <style>
  17. html,
  18. body,
  19. #app {
  20. height: 100%;
  21. margin: 0px;
  22. padding: 0px;
  23. }
  24. #loader-wrapper {
  25. position: fixed;
  26. top: 0;
  27. left: 0;
  28. width: 100%;
  29. height: 100%;
  30. z-index: 999999;
  31. display: flex;
  32. flex-wrap: nowrap;
  33. align-content: center;
  34. justify-content: center;
  35. align-items: center;
  36. }
  37. #loader-wrapper .load_title {
  38. font-family: 'Open Sans';
  39. color: #FFF;
  40. font-size: 19px;
  41. width: 100%;
  42. text-align: center;
  43. z-index: 9999999999999;
  44. position: absolute;
  45. top: 49%;
  46. opacity: 1;
  47. line-height: 30px;
  48. }
  49. @keyframes mounthAni {
  50. 40% {
  51. stroke-dasharray: 44, 22;
  52. /* 间距改为1/4 */
  53. }
  54. 80%,
  55. 100% {
  56. stroke-dasharray: 44, 44;
  57. /* 间距恢复为1/2 */
  58. transform: rotate(720deg);
  59. }
  60. }
  61. @keyframes eyeAni {
  62. 40% {
  63. stroke-dasharray: 0, 77;
  64. /* 间距改为7/8 */
  65. }
  66. 80%,
  67. 100% {
  68. transform: rotate(675deg);
  69. /* 间距恢复为3/4 */
  70. stroke-dasharray: 0, 66;
  71. }
  72. }
  73. @keyframes dash {
  74. 0% {
  75. stroke-dashoffset: 2000;
  76. }
  77. 90% {
  78. stroke-dashoffset: 0;
  79. }
  80. }
  81. @keyframes loading22 {
  82. 60% {
  83. stroke-dashoffset: 1000;
  84. }
  85. 100% {
  86. stroke-dashoffset: 0;
  87. }
  88. }
  89. </style>
  90. </head>
  91. <body>
  92. <div id="app">
  93. <div id="loader-wrapper">
  94. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"
  95. viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
  96. <path opacity="0.2" fill="rgba(73,125,235,1)"
  97. 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
  98. 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
  99. 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>
  100. <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
  101. C22.32,8.481,24.301,9.057,26.013,10.047z" transform="rotate(42.1171 20 20)">
  102. <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20"
  103. to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>
  104. </path>
  105. </svg>
  106. </div>
  107. </div>
  108. </body>
  109. </html>