preloader

HTML

<div class="spinner">
            <span class="ball_1 spinner_ball"></span>
            <span class="ball_2 spinner_ball"></span>
            <span class="ball_3 spinner_ball"></span>
        </div>

CSS

.spinner {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.spinner .ball_1 {
    -webkit-animation-timing-function: cubic-bezier(.5,.3,.9,.9);
    animation-timing-function: cubic-bezier(.5,.3,.9,.9);
    -o-animation-name: rotate;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: rotate;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -o-transform-origin: 6px 30px;
    -ms-transform-origin: 6px 30px;
    -webkit-transform-origin: 6px 30px;
    -moz-transform-origin: 6px 30px;
}

.spinner .ball_2 {
    -webkit-animation-timing-function: cubic-bezier(.5,.5,.9,.9);
    animation-timing-function: cubic-bezier(.5,.5,.9,.9);
    -o-animation-name: rotate;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: rotate;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -o-transform-origin: 6px 30px;
    -ms-transform-origin: 6px 30px;
    -webkit-transform-origin: 6px 30px;
    -moz-transform-origin: 6px 30px;
}

.spinner .ball_3 {
    -webkit-animation-timing-function: cubic-bezier(.5,.7,.9,.9);
    animation-timing-function: cubic-bezier(.5,.7,.9,.9);
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    -o-animation-name: rotate;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: rotate;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
   ...