wux-weapp/src/loading/index.less

一套组件化、可复用、易扩展的微信小程序 UI 组件库

@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";

.@{wux-prefix}-loading {
    position: fixed;
    z-index: @z-index-toast;
    top: 50%;
    left: 50%;
    background: @toast-bg;
    font-size: @font-size-base;
    line-height: @line-height-base;
    text-align: center;
    border-radius: @border-radius-base;
    color: @text-color-inverse;
    transform: translate3d(-50%, -50%, 0);

    &__content {
        min-width: 118px;
        padding: 9px 15px;
        box-sizing: border-box;

        &--has-icon {
            padding: 15px;

            .@{wux-prefix}-loading__text {
                margin-top: 6px;
            }
        }
    }

    &__icon {
        margin: 0;
        display: block;

        &--loading {
            display: inline-block !important;
            vertical-align: middle;
            animation: loading 1s steps(12, end) infinite;

            .encoded-svg-background(loading);

            background-repeat: no-repeat;
            background-size: 100%;
            margin: 5px 0 0 !important;
            width: 38px;
            height: 38px;
            vertical-align: baseline;
        }
    }
}

@keyframes loading {
    0% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}