loading.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. /**Variable**/
  2. /*加载中*/
  3. .vxe-loading {
  4. display: none;
  5. position: absolute;
  6. width: 100%;
  7. height: 100%;
  8. top: 0;
  9. left: 0;
  10. z-index: 99;
  11. user-select: none;
  12. background-color: $vxe-loading-background-color;
  13. &.is--visible {
  14. display: block;
  15. }
  16. & > .vxe-loading--chunk {
  17. width: 100%;
  18. position: absolute;
  19. top: 50%;
  20. left: 0;
  21. transform: translateY(-50%);
  22. text-align: center;
  23. color: $vxe-loading-color;
  24. }
  25. .vxe-loading--default-icon {
  26. font-size: 1.4em;
  27. }
  28. .vxe-loading--text {
  29. padding: 0.4em 0;
  30. }
  31. .vxe-loading--spinner {
  32. display: inline-block;
  33. position: relative;
  34. width: 56px;
  35. height: 56px;
  36. &:before,
  37. &:after {
  38. content: "";
  39. width: 100%;
  40. height: 100%;
  41. border-radius: 50%;
  42. background-color: $vxe-primary-color;
  43. opacity: 0.6;
  44. position: absolute;
  45. top: 0;
  46. left: 0;
  47. animation: bounce 2.0s infinite ease-in-out;
  48. }
  49. &:after {
  50. animation-delay: -1.0s;
  51. }
  52. }
  53. @keyframes bounce {
  54. 0%, 100% {
  55. transform: scale(0);
  56. } 50% {
  57. transform: scale(1);
  58. }
  59. }
  60. }
  61. .size--mini {
  62. .vxe-loading {
  63. .vxe-loading--spinner {
  64. width: 38px;
  65. height: 38px;
  66. }
  67. }
  68. }
  69. .size--small {
  70. .vxe-loading {
  71. .vxe-loading--spinner {
  72. width: 44px;
  73. height: 44px;
  74. }
  75. }
  76. }
  77. .size--medium {
  78. .vxe-loading {
  79. .vxe-loading--spinner {
  80. width: 50px;
  81. height: 50px;
  82. }
  83. }
  84. }