/* > > > USAGE
<div class="spinnerSquare play">
    <div></div><div></div><div></div><div></div>
</div>*/

@charset "utf-8";

.spinnerSquare {
    position: absolute;
    display: inline-block;
    opacity: 0;
    width: 0px;
    height: 0px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    z-index: 3;
    transform-origin: bottom left;
    transition: opacity .3s, width .3s, height .3s;

    &.play {
        opacity: 1;
        width: 32px;
        height: 32px;
        animation: spinnerSquareShrink 1s linear infinite;
    }

    & > div {
        position: absolute;
        width: 50%;
        height: 50%;
        background: #FFF;
        box-shadow: -1px 1px 3px 0px rgb(0 0 0 / 30%);
    }

    & > div:nth-child(1) {
        left: 0px;
        top: 50%;
    }

    & > div:nth-child(2) {
        left: 50%;
        top: 50%;
        transform-origin:top;
    }
    &.play > div:nth-child(2){
        animation: spinnerSquareDrop2 1s linear infinite;
    }

    & > div:nth-child(3) {
        left: 0px;
        top: 0px;
        transform-origin:top;
    }
    &.play > div:nth-child(3) {
        animation: spinnerSquareDrop3 1s linear infinite;
    }

    & > div:nth-child(4) {
        left: 50%;
        top: 0px;
        transform-origin:top;
    }
    &.play > div:nth-child(4) {
        animation: spinnerSquareDrop4 1s linear infinite;
    }
}

@keyframes spinnerSquareShrink {
    0% {transform: scale(1);}
    90% {transform: scale(1);}
    100% {transform: scale(0.5);}
}

@keyframes spinnerSquareDrop2 {
    0% {transform: translateY(-100%) scaleY(0);}
    14.5% {transform: translateY(-100%) scaleY(1);}
    25% {transform: translateY(0) scaleY(1);}
    50% {transform: translateY(0) scaleY(1);}
    100% {transform: translateY(0) scaleY(1);}
}

@keyframes spinnerSquareDrop3 {
    0% {transform: scaleY(0);}
    25% {transform: scaleY(0);}
    50% {transform: scaleY(1);}
    100% {transform: scaleY(1);}
}

@keyframes spinnerSquareDrop4 {
    0% {transform: scaleY(0);}
    50% {transform: scaleY(0);}
    75% {transform: scaleY(1);}
    100% {transform: scaleY(1);}
}