.loader{
    position:relative;
    line-height: 50px;
    min-height: 50px;
    width: 160px;
    text-align: center;
    margin: 30px auto;
}
.loader span{
    position:absolute;
    width:12px;
    height:12px;
    background: #44d778;
    opacity:0.5;
    border-radius:20px;
    -webkit-animation: loader 1s infinite ease-in-out;
    -moz-animation: loader 1s infinite ease-in-out;
    -ms-animation: loader 1s infinite ease-in-out;
    -animation: loader 1s infinite ease-in-out;

}
.loader span:nth-child(2){
    left:20px;
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -ms-animation-delay: .2s;
    animation-delay: .2s;
}
.loader span:nth-child(3){
    left:40px;
    -webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    -ms-animation-delay: .4s;
    animation-delay: .4s;
}
.loader span:nth-child(4){
    left:60px;
    -webkit-animation-delay: .6s;
    -moz-animation-delay: .6s;
    -ms-animation-delay: .6s;
    animation-delay: .6s;
}

@-webkit-keyframes loader {
    0% {opacity: 0.3; -webkit-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; -webkit-transform: translateY(-10px); background: #89e2f1; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
    100%  {opacity: 0.3; -webkit-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
@-moz-keyframes loader {
    0% {opacity: 0.3; -moz-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; -moz-transform: translateY(-10px); background:#89e2f1; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
    100%  {opacity: 0.3; -moz-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
@-ms-keyframes loader {
    0% {opacity: 0.3; -ms-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; -ms-transform: translateY(-10px); background:#89e2f1; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
    100%  {opacity: 0.3; -ms-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
@keyframes loader {
    0% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; transform: translateY(-10px); background:#89e2f1; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
    100%  {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}