.loadings {
    position: relative;
}

    .loadings:before {
        content: '';
        border: 2px solid rgb(20,32,47);
        border-radius: 100%;
        height: 40px;
        left: 50%;
        margin: -22px 0 0 -22px;
        opacity: 0;
        position: absolute;
        top: 50%;
        width: 40px;
        animation: pulsate 1s ease-out;
        animation-iteration-count: infinite;
        -webkit-animation: pulsate 1s ease-out;
        -webkit-animation-iteration-count: infinite;
        -moz-animation: pulsate 1s ease-out;
        -moz-animation-iteration-count: infinite;
        background: none;
        z-index: 4;
    }

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

    50% {
        opacity: 1;
    }

    100% {
    }
}

@-moz-keyframes pulsate {
    0% {
        -moz-transform: scale(.1);
        opacity: 0.0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -moz-transform: scale(1.2);
        opacity: 0;
    }
}

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

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}