@use "sass:map"; @use "sass:list"; $loadingThemeList: ( ( name: "primary", textColor: var(--vxe-ui-font-primary-color), bgColor: var(--vxe-ui-font-primary-tinge-color) ), ( name: "success", textColor: var(--vxe-ui-status-success-color), bgColor: var(--vxe-ui-status-success-tinge-color) ), ( name: "info", textColor: var(--vxe-ui-status-info-color), bgColor: var(--vxe-ui-status-info-tinge-color) ), ( name: "warning", textColor: var(--vxe-ui-status-warning-color), bgColor: var(--vxe-ui-status-warning-tinge-color) ), ( name: "danger", textColor: var(--vxe-ui-status-danger-color), bgColor: var(--vxe-ui-status-danger-tinge-color) ), ( name: "error", textColor: var(--vxe-ui-status-error-color), bgColor: var(--vxe-ui-status-error-tinge-color) ) ); .vxe-loading { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 99; user-select: none; color: var(--vxe-ui-loading-color); background-color: var(--vxe-ui-loading-background-color); .vxe-loading--spinner { &:before, &:after { background-color: var(--vxe-ui-font-primary-color); } } @for $index from 0 to list.length($loadingThemeList) { $item: list.nth($loadingThemeList, $index + 1); &.theme--#{map.get($item, name)} { color: map.get($item, textColor); background-color: map.get($item, bgColor); .vxe-loading--spinner { &:before, &:after { background-color: map.get($item, bgColor); } } } } &.is--visible { display: block; } & > .vxe-loading--chunk, & > .vxe-loading--wrapper { width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); text-align: center; } .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%; 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; } } }