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

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

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

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

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

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

        80% {
            -webkit-transform: scale(1);
            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;
            @include border-radius(100%);
            margin: 2px;

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

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