index.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title><%- title %></title>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <style>
  12. #loader-wrapper {
  13. position: fixed;
  14. top: 0;
  15. left: 0;
  16. width: 100%;
  17. height: 100%;
  18. z-index: 1000;
  19. }
  20. #loader {
  21. display: block;
  22. position: relative;
  23. left: 50%;
  24. top: 50%;
  25. width: 150px;
  26. height: 150px;
  27. margin: -75px 0 0 -75px;
  28. border-radius: 50%;
  29. border: 3px solid transparent;
  30. border-top-color: #3498db;
  31. -webkit-animation: spin 2s linear infinite;
  32. /* Chrome, Opera 15+, Safari 5+ */
  33. animation: spin 2s linear infinite;
  34. /* Chrome, Firefox 16+, IE 10+, Opera */
  35. z-index: 1001;
  36. }
  37. #loader-logo {
  38. display: block;
  39. position: absolute;
  40. left: 48%;
  41. top: 46%;
  42. background: url(../images/user-bg-2.jpg) no-repeat center center;
  43. z-index: 1001;
  44. }
  45. #loader:before {
  46. content: "";
  47. position: absolute;
  48. top: 5px;
  49. left: 5px;
  50. right: 5px;
  51. bottom: 5px;
  52. border-radius: 50%;
  53. border: 3px solid transparent;
  54. border-top-color: #e74c3c;
  55. -webkit-animation: spin 3s linear infinite;
  56. /* Chrome, Opera 15+, Safari 5+ */
  57. animation: spin 3s linear infinite;
  58. /* Chrome, Firefox 16+, IE 10+, Opera */
  59. }
  60. #loader:after {
  61. content: "";
  62. position: absolute;
  63. top: 15px;
  64. left: 15px;
  65. right: 15px;
  66. bottom: 15px;
  67. border-radius: 50%;
  68. border: 3px solid transparent;
  69. border-top-color: #f9c922;
  70. -webkit-animation: spin 1.5s linear infinite;
  71. /* Chrome, Opera 15+, Safari 5+ */
  72. animation: spin 1.5s linear infinite;
  73. /* Chrome, Firefox 16+, IE 10+, Opera */
  74. }
  75. @-webkit-keyframes spin {
  76. 0% {
  77. -webkit-transform: rotate(0deg);
  78. /* Chrome, Opera 15+, Safari 3.1+ */
  79. -ms-transform: rotate(0deg);
  80. /* IE 9 */
  81. transform: rotate(0deg);
  82. /* Firefox 16+, IE 10+, Opera */
  83. }
  84. 100% {
  85. -webkit-transform: rotate(360deg);
  86. /* Chrome, Opera 15+, Safari 3.1+ */
  87. -ms-transform: rotate(360deg);
  88. /* IE 9 */
  89. transform: rotate(360deg);
  90. /* Firefox 16+, IE 10+, Opera */
  91. }
  92. }
  93. @keyframes spin {
  94. 0% {
  95. -webkit-transform: rotate(0deg);
  96. /* Chrome, Opera 15+, Safari 3.1+ */
  97. -ms-transform: rotate(0deg);
  98. /* IE 9 */
  99. transform: rotate(0deg);
  100. /* Firefox 16+, IE 10+, Opera */
  101. }
  102. 100% {
  103. -webkit-transform: rotate(360deg);
  104. /* Chrome, Opera 15+, Safari 3.1+ */
  105. -ms-transform: rotate(360deg);
  106. /* IE 9 */
  107. transform: rotate(360deg);
  108. /* Firefox 16+, IE 10+, Opera */
  109. }
  110. }
  111. #loader-wrapper .loader-section {
  112. position: fixed;
  113. top: 0;
  114. width: 51%;
  115. height: 100%;
  116. background: #222222;
  117. z-index: 1000;
  118. -webkit-transform: translateX(0);
  119. /* Chrome, Opera 15+, Safari 3.1+ */
  120. -ms-transform: translateX(0);
  121. /* IE 9 */
  122. transform: translateX(0);
  123. /* Firefox 16+, IE 10+, Opera */
  124. }
  125. #loader-wrapper .loader-section.section-left {
  126. left: 0;
  127. }
  128. #loader-wrapper .loader-section.section-right {
  129. right: 0;
  130. }
  131. /* Loaded */
  132. .loaded #loader-wrapper .loader-section.section-left {
  133. -webkit-transform: translateX(-100%);
  134. /* Chrome, Opera 15+, Safari 3.1+ */
  135. -ms-transform: translateX(-100%);
  136. /* IE 9 */
  137. transform: translateX(-100%);
  138. /* Firefox 16+, IE 10+, Opera */
  139. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  140. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  141. }
  142. .loaded #loader-wrapper .loader-section.section-right {
  143. -webkit-transform: translateX(100%);
  144. /* Chrome, Opera 15+, Safari 3.1+ */
  145. -ms-transform: translateX(100%);
  146. /* IE 9 */
  147. transform: translateX(100%);
  148. /* Firefox 16+, IE 10+, Opera */
  149. -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  150. transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  151. }
  152. .loaded #loader {
  153. opacity: 0;
  154. -webkit-transition: all 0.3s ease-out;
  155. transition: all 0.3s ease-out;
  156. }
  157. .loaded #loader-wrapper {
  158. visibility: hidden;
  159. -webkit-transform: translateY(-100%);
  160. /* Chrome, Opera 15+, Safari 3.1+ */
  161. -ms-transform: translateY(-100%);
  162. /* IE 9 */
  163. transform: translateY(-100%);
  164. /* Firefox 16+, IE 10+, Opera */
  165. -webkit-transition: all 0.3s 1s ease-out;
  166. transition: all 0.3s 1s ease-out;
  167. }
  168. </style>
  169. <div id="loader-wrapper">
  170. <div id="loader"></div>
  171. <div class="loader-section section-left"></div>
  172. <div class="loader-section section-right"></div>
  173. </div>
  174. </div>
  175. <script type="module" src="/src/main.ts"></script>
  176. </body>
  177. </html>