114426e91e86708e0e40477aefe3d3ff7d998a383135167b81cc03e9ab7b58c0934211ee2f47d382531cbcfb5a95bf866c025dd4bf77ff6b5383439d464763 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. @import "mixins/mixins";
  2. @import "common/var";
  3. @include b(loading-parent) {
  4. @include m(relative) {
  5. position: relative !important;
  6. }
  7. @include m(hidden) {
  8. overflow: hidden !important;
  9. }
  10. }
  11. @include b(loading-mask) {
  12. position: absolute;
  13. z-index: 2000;
  14. background-color: rgba(255, 255, 255, .9);
  15. margin: 0;
  16. top: 0;
  17. right: 0;
  18. bottom: 0;
  19. left: 0;
  20. transition: opacity 0.3s;
  21. @include when(fullscreen) {
  22. position: fixed;
  23. .el-loading-spinner {
  24. margin-top: #{- $--loading-fullscreen-spinner-size / 2};
  25. .circular {
  26. height: $--loading-fullscreen-spinner-size;
  27. width: $--loading-fullscreen-spinner-size;
  28. }
  29. }
  30. }
  31. }
  32. @include b(loading-spinner) {
  33. top: 50%;
  34. margin-top: #{- $--loading-spinner-size / 2};
  35. width: 100%;
  36. text-align: center;
  37. position: absolute;
  38. .el-loading-text {
  39. color: $--color-primary;
  40. margin: 3px 0;
  41. font-size: 14px;
  42. }
  43. .circular {
  44. height: $--loading-spinner-size;
  45. width: $--loading-spinner-size;
  46. animation: loading-rotate 2s linear infinite;
  47. }
  48. .path {
  49. animation: loading-dash 1.5s ease-in-out infinite;
  50. stroke-dasharray: 90, 150;
  51. stroke-dashoffset: 0;
  52. stroke-width: 2;
  53. stroke: $--color-primary;
  54. stroke-linecap: round;
  55. }
  56. i {
  57. color: $--color-primary;
  58. }
  59. }
  60. .el-loading-fade-enter,
  61. .el-loading-fade-leave-active {
  62. opacity: 0;
  63. }
  64. @keyframes loading-rotate {
  65. 100% {
  66. transform: rotate(360deg);
  67. }
  68. }
  69. @keyframes loading-dash {
  70. 0% {
  71. stroke-dasharray: 1, 200;
  72. stroke-dashoffset: 0;
  73. }
  74. 50% {
  75. stroke-dasharray: 90, 150;
  76. stroke-dashoffset: -40px;
  77. }
  78. 100% {
  79. stroke-dasharray: 90, 150;
  80. stroke-dashoffset: -120px;
  81. }
  82. }