loading.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <style>
  6. html {
  7. overflow: hidden;
  8. resize: none;
  9. --antd-wave-shadow-color: #1890ff;
  10. }
  11. body {
  12. font-size: 16px;
  13. margin: 0;
  14. padding: 0;
  15. background-color: rgba(255, 255, 255, 0.8);
  16. }
  17. @keyframes antRotate {
  18. 100% {
  19. transform: rotate(405deg);
  20. }
  21. }
  22. @keyframes antSpinMove {
  23. 100% {
  24. opacity: 1;
  25. }
  26. }
  27. .ant-spin-spinning {
  28. position: static;
  29. display: inline-block;
  30. opacity: 1;
  31. }
  32. .ant-spin-spinning {
  33. position: static;
  34. display: inline-block;
  35. opacity: 1;
  36. }
  37. .ant-spin-dot {
  38. font-size: 32px;
  39. }
  40. .ant-spin-dot-spin {
  41. transform: rotate(45deg);
  42. -webkit-animation: antRotate 1.2s infinite linear;
  43. animation: antRotate 1.2s infinite linear;
  44. }
  45. .ant-spin-dot {
  46. position: relative;
  47. display: inline-block;
  48. font-size: 40px;
  49. width: 1em;
  50. height: 1em;
  51. }
  52. .ant-spin-dot-item {
  53. position: absolute;
  54. display: block;
  55. width: 18px;
  56. height: 18px;
  57. background-color: #1890ff;
  58. border-radius: 100%;
  59. transform: scale(0.75);
  60. transform-origin: 50% 50%;
  61. opacity: 0.3;
  62. -webkit-animation: antSpinMove 1s infinite linear alternate;
  63. animation: antSpinMove 1s infinite linear alternate;
  64. }
  65. .ant-spin-dot-item:nth-child(1) {
  66. top: 0;
  67. left: 0;
  68. }
  69. .ant-spin-dot-item:nth-child(2) {
  70. top: 0;
  71. right: 0;
  72. -webkit-animation-delay: 0.4s;
  73. animation-delay: 0.4s;
  74. }
  75. .ant-spin-dot-item:nth-child(3) {
  76. right: 0;
  77. bottom: 0;
  78. -webkit-animation-delay: 0.8s;
  79. animation-delay: 0.8s;
  80. }
  81. .ant-spin-dot-item:nth-child(4) {
  82. bottom: 0;
  83. left: 0;
  84. -webkit-animation-delay: 1.2s;
  85. animation-delay: 1.2s;
  86. }
  87. .ant-spin {
  88. box-sizing: border-box;
  89. margin: 0;
  90. padding: 0;
  91. font-size: 14px;
  92. font-variant: tabular-nums;
  93. line-height: 1.5715;
  94. list-style: none;
  95. font-feature-settings: 'tnum';
  96. color: #1890ff;
  97. text-align: center;
  98. vertical-align: middle;
  99. transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  100. }
  101. ::selection {
  102. color: #fff;
  103. background: #1890ff;
  104. }
  105. #loading {
  106. width: 160px;
  107. height: 160px;
  108. /* background-color: rgb(248, 253, 255); */
  109. display: flex;
  110. justify-self: center;
  111. align-items: center;
  112. justify-content: center;
  113. }
  114. </style>
  115. <script src="../js/logger.js"></script>
  116. <script src="../js/path.js"></script>
  117. <script src="base.js"></script>
  118. <script src="../js/encode.js"></script>
  119. <script src="../js/eventBus.js"></script>
  120. <script type="text/javascript">
  121. function loadMessage() {
  122. var params = getQueryParams()
  123. var ele = document.querySelector('div.ant-spin')
  124. if (params.message) {
  125. ele.className = ele.className + ' ant-spin-show-text'
  126. var txt = document.createElement('div')
  127. txt.className = 'ant-spin-text'
  128. txt.innerText = params.message
  129. ele.appendChild(txt)
  130. }
  131. }
  132. var eventid = {}
  133. function registerEvent() {
  134. var params = getQueryParams()
  135. eventid.closeLoading = EventBus.Subscribe(
  136. `closeLoading$${params.instid}`,
  137. function (id, msg) {
  138. window.close()
  139. }
  140. )
  141. }
  142. function unsub() {
  143. var params = getQueryParams()
  144. EventBus.UnSub(`closeLoading#${params.instid}`, eventid.closeLoading)
  145. }
  146. function autoClose() {
  147. var params = getQueryParams()
  148. if (!!params.autoclose)
  149. setTimeout(function () {
  150. window.close()
  151. }, params.autoclose * 1000)
  152. }
  153. function init() {
  154. loginfo('显示loading')
  155. registerEvent()
  156. StopEscKeyKown()
  157. loadMessage()
  158. autoClose()
  159. }
  160. </script>
  161. </head>
  162. <body onload="init()" onbeforeunload="unsub()">
  163. <div id="loading">
  164. <div class="ant-spin ant-spin-spinning">
  165. <span class="ant-spin-dot ant-spin-dot-spin"
  166. ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
  167. ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
  168. ></span>
  169. </div>
  170. </div>
  171. </body>
  172. </html>