.loader{
    background-color: #000;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position:absolute;
    margin-left: -10px;
    margin-top: -10px;
    left:50%;
    top:50%;
    @include animation(float 1s infinite ease-in-out);
    @include transition(opacity 0.110s $ease);
    @include opacity(0);
}

.loader.show{
    @include transition(opacity 0.110s $ease 0.440s);
    @include opacity(1);
}


//Animation

.float{

    @include animation(float 3s infinite ease-in-out);

}

@-webkit-keyframes float{
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(0, 7px);}
    to {-webkit-transform: translate(0, 0px);    }
}

@-moz-keyframes float{
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 7px);}
    to {-moz-transform: translate(0, 0px);}
}

@-ms-keyframes float{
    from {-ms-transform:translate(0, 0px);}
    65% {-ms-transform:translate(0, 7px);}
    to {-ms-transform: translate(0, 0px);}
}

@keyframes float{
    from {transform:translate(0, 0px);}
    65% {transform:translate(0, 7px);}
    to {transform: translate(0, 0px);}
}