Blame view

public/scss/layout/_loading.css 1.36 KB
ccbikai authored
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
@keyframes loadingScale {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    45% {
        transform: scale(0.1);
        opacity: 0.7;
    }

    80% {
        transform: scale(1);
        opacity: 1;
    }
}
17 18 19 20 21 22 23 24 25 26 27 28 29
.width750 {
    .loading {
        margin-top: -23px;
        margin-left: -70px;
        width: 140px;
        height: 47px;
        > div {
            margin: 5px;
            width: 35px;
            height: 35px;
        }
    }
}
30
.loading-mask {
王水玲 authored
31 32 33 34 35
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
ccbikai authored
36
    background: rgba(0, 0, 0, 0.5);
ccbikai authored
37
    z-index: 9;
38 39 40 41 42

    .loading {
        position: absolute;
        top: 50%;
        left: 50%;
王水玲 authored
43 44
        margin-top: -20px;
        margin-left: -60px;
ccbikai authored
45 46
        width: 120px;
        height: 40px;
47 48 49 50 51 52

        > div {
            $init: 0.12;

            @for $i from 1 to 3 {
                &:nth-child($i) {
ccbikai authored
53
                    animation: loadingScale 0.75s $(init)s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
54
                }
王水玲 authored
55 56

                $init: calc(($i + 1) * 0.12);
57
            }
王水玲 authored
58
ccbikai authored
59 60 61 62 63 64
            display: inline-block;
            margin: 4px;
            width: 30px;
            height: 30px;
            border-radius: 100%;
            background: #fff;
65 66
        }
    }
陈轩 authored
67 68 69 70 71

    &.loading-mask-opactiy {
        background: transparent;
        .loading > div {background-color: #444;}
    }
72
}