.loader {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

.loader-init {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.loader-inner {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
    width: 30px;
}

.loader-inner img {
    opacity: 0;
}

.loader-inner-init {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 0%;
    left: 0%;
    position: absolute;
    width: 100px;
    height: 100px;
}

.loader-inner-init img {
    opacity: 0;
}

@keyframes loadingSVGOne {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    25% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    75% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
}

@-webkit-keyframes loadingSVGOne {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
    }
    25% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    50% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    75% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(15px);
    }
}

@keyframes loadingSVGOneInitial {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    50% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
}
@-webkit-keyframes loadingSVGOneInitial {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
    }
    50% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
}

/*Animation two*/
@keyframes loadingSVGTwo {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    25% {
        opacity: 0.45;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        opacity: 0.45;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    75% {
        opacity: 0.45;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(15px);
        -ms-transform: translateY(15px);
        transform: translateY(15px);
    }
}

@keyframes loadingSVGTwoInitial {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    50% {
        opacity: 0.45;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        opacity: 0.45;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@-webkit-keyframes loadingSVGTwoInitial {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
    }
    50% {
        opacity: 0.45;
        -webkit-transform: translateY(0px);
    }
    100% {
        opacity: 0.45;
        -webkit-transform: translateY(0px);
    }
}
@-webkit-keyframes loadingSVGTwo {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
    }
    25% {
        opacity: 0.45;
        -webkit-transform: translateY(0px);
    }
    50% {
        opacity: 0.45;
        -webkit-transform: translateY(0px);
    }
    75% {
        opacity: 0.45;
        -webkit-transform: translateY(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(15px);
    }
}

/*Animation three*/
@keyframes loadingSVGThree {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    25% {
        opacity: 0.25;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        opacity: 0.25;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    75% {
        opacity: 0.25;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(15px);
        -ms-transform: translateY(15px);
        transform: translateY(15px);
    }
}

@-webkit-keyframes loadingSVGThree {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
    }
    25% {
        opacity: 0.25;
        -webkit-transform: translateY(0px);
    }
    50% {
        opacity: 0.25;
        -webkit-transform: translateY(0px);
    }
    75% {
        opacity: 0.25;
        -webkit-transform: translateY(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(15px);
    }
}

/*Animation three*/
@keyframes loadingSVGThreeInitial {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    50% {
        opacity: 0.25;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        opacity: 0.25;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@-webkit-keyframes loadingSVGThreeInitial {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-15px);
    }
    50% {
        opacity: 0.25;
        -webkit-transform: translateY(0px);
    }
    100% {
        opacity: 0.25;
        -webkit-transform: translateY(0px);
    }
}

.loader-inner-init img:nth-child(3) {
    width: 60px;
    height: 60px;
    -webkit-animation: loadingSVGThreeInitial 1.5s 250ms ease-in forwards;
    position: relative;
    top: -100px;
    left: 20%;
    animation: loadingSVGThreeInitial 1.5s 250ms ease-in forwards;
    z-index: 1;
}

.loader-inner-init img:nth-child(2) {
    width: 60px;
    height: 60px;
    -webkit-animation: loadingSVGTwoInitial 1.5s 400ms ease-in forwards;
    animation: loadingSVGTwoInitial 1.5s 400ms ease-in forwards;
    top: -50px;
    left: 20%;
    position: relative;
    z-index: 2;
}

.loader-inner-init img:nth-child(1) {
    width: 60px;
    height: 60px;
    left: 20%;
    -webkit-animation: loadingSVGOneInitial 1.5s 650ms ease-in forwards;
    animation: loadingSVGOneInitial 1.5s 650ms ease-in forwards; 
    top: 0px;
    position: relative;
    z-index: 3;
}

.loader-inner img:nth-child(3) {
    -webkit-animation: loadingSVGThree 3s 100ms infinite ease-in;
    animation: loadingSVGThree 3s 100ms infinite ease-in;
    z-index: 1;
}

.loader-inner img:nth-child(2) {
    -webkit-animation: loadingSVGTwo 3s 300ms infinite ease-in;
    animation: loadingSVGTwo 3s 300ms infinite ease-in;
    top: 16px;
    position: relative;
    z-index: 2;
}

.loader-inner img:nth-child(1) {
    -webkit-animation: loadingSVGOne 3s 800ms infinite ease-in;
    animation: loadingSVGOne 3s 800ms infinite ease-in;
    top: 32px;
    position: relative;
    z-index: 3;
}