loading.scss 1.2 KB

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