default-loading-antd.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <style data-app-loading="inject-css">
  2. html {
  3. /* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
  4. line-height: 1.15;
  5. }
  6. .dark .loading {
  7. background-color: #0d0d10;
  8. }
  9. .dark .loading .title {
  10. color: rgb(255 255 255 / 85%);
  11. }
  12. .loading {
  13. position: fixed;
  14. top: 0;
  15. left: 0;
  16. z-index: 9999;
  17. display: flex;
  18. flex-direction: column;
  19. align-items: center;
  20. justify-content: center;
  21. width: 100%;
  22. height: 100%;
  23. overflow: hidden;
  24. pointer-events: none;
  25. background-color: #f4f7f9;
  26. }
  27. .loading.hidden {
  28. visibility: hidden;
  29. opacity: 0;
  30. transition: all 0.6s ease-out;
  31. }
  32. .loading .title {
  33. margin-top: 36px;
  34. font-size: 30px;
  35. font-weight: 600;
  36. color: rgb(0 0 0 / 85%);
  37. }
  38. .dot {
  39. position: relative;
  40. box-sizing: border-box;
  41. display: inline-block;
  42. width: 48px;
  43. height: 48px;
  44. margin-top: 30px;
  45. font-size: 32px;
  46. transform: rotate(45deg);
  47. animation: rotate-ani 1.2s infinite linear;
  48. }
  49. .dot i {
  50. position: absolute;
  51. display: block;
  52. width: 20px;
  53. height: 20px;
  54. background-color: hsl(var(--primary, 210 100% 50%));
  55. border-radius: 100%;
  56. opacity: 0.3;
  57. transform: scale(0.75);
  58. transform-origin: 50% 50%;
  59. animation: spin-move-ani 1s infinite linear alternate;
  60. }
  61. .dot i:nth-child(1) {
  62. top: 0;
  63. left: 0;
  64. }
  65. .dot i:nth-child(2) {
  66. top: 0;
  67. right: 0;
  68. animation-delay: 0.4s;
  69. }
  70. .dot i:nth-child(3) {
  71. right: 0;
  72. bottom: 0;
  73. animation-delay: 0.8s;
  74. }
  75. .dot i:nth-child(4) {
  76. bottom: 0;
  77. left: 0;
  78. animation-delay: 1.2s;
  79. }
  80. @keyframes rotate-ani {
  81. to {
  82. transform: rotate(405deg);
  83. }
  84. }
  85. @keyframes spin-move-ani {
  86. to {
  87. opacity: 1;
  88. }
  89. }
  90. </style>
  91. <div class="loading" id="__app-loading__">
  92. <span class="dot"><i></i><i></i><i></i><i></i></span>
  93. <div class="title"><%= VITE_APP_TITLE %></div>
  94. </div>