| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- /**Variable**/
- /*加载中*/
- .vxe-loading {
- display: none;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- z-index: 99;
- user-select: none;
- background-color: $vxe-loading-background-color;
- &.is--visible {
- display: block;
- }
- & > .vxe-loading--chunk {
- width: 100%;
- position: absolute;
- top: 50%;
- left: 0;
- transform: translateY(-50%);
- text-align: center;
- color: $vxe-loading-color;
- }
- .vxe-loading--default-icon {
- font-size: 1.4em;
- }
- .vxe-loading--text {
- padding: 0.4em 0;
- }
- .vxe-loading--spinner {
- display: inline-block;
- position: relative;
- width: 56px;
- height: 56px;
- &:before,
- &:after {
- content: "";
- width: 100%;
- height: 100%;
- border-radius: 50%;
- background-color: $vxe-primary-color;
- opacity: 0.6;
- position: absolute;
- top: 0;
- left: 0;
- animation: bounce 2.0s infinite ease-in-out;
- }
- &:after {
- animation-delay: -1.0s;
- }
- }
- @keyframes bounce {
- 0%, 100% {
- transform: scale(0);
- } 50% {
- transform: scale(1);
- }
- }
- }
- .size--mini {
- .vxe-loading {
- .vxe-loading--spinner {
- width: 38px;
- height: 38px;
- }
- }
- }
- .size--small {
- .vxe-loading {
- .vxe-loading--spinner {
- width: 44px;
- height: 44px;
- }
- }
- }
- .size--medium {
- .vxe-loading {
- .vxe-loading--spinner {
- width: 50px;
- height: 50px;
- }
- }
- }
|