_loading.css 1.02 KB
.loading-mask {
    position: fixed;
    background: rgba(0,0,0,.1);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    @keyframes scale {
        0% {
            transform: scale(1);
            opacity: 1;
        }

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

        80% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .loading {
        position: absolute;
        width: 60PX;
        height: 20PX;
        top: 50%;
        left: 50%;
        margin-top: -10PX;
        margin-left: -30PX;

        > div {
            display: inline-block;
            background: #fff;
            width: 15PX;
            height: 15PX;
            border-radius: 100%;
            margin: 2PX;

            $init: 0.12;
            @for $i from 1 to 3 {
                &:nth-child($i) {
                    animation: scale .75s $(init)s infinite cubic-bezier(.2,.68,.18,1.08);
                }

                $init: ($i + 1) * 0.12;
            }
        }
    }
}