Compact ed effective CSS animation loader

Simple but responsive and very adaptable CSS animation loader

Compatible with all major browsers and IE > 8.

Aaaand here is the code:

.loading{
    color:#000;
    background: #fff;
    position:relative;
    text-align: center;
}

.loading:before {
    content: "\0020";
    display: block;
    width:1em;
    height: 1em;
    color:#fff;
    background: #000;
    border-radius: 1em;
    position:absolute;
    z-index: 1;
    right:0;
    bottom:50%;
    opacity:0;
    
    transform: translate3d(0,0,0);
    animation-duration: 1.5s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;

    -webkit-transform: translate3d(0,0,0);
    -webkit-animation-duration: 1.5s;
    -webkit-animation-name: slidein;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

    -moz-transform: translate3d(0,0,0);
    -moz-animation-duration: 1.5s;
    -moz-animation-name: slidein;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;

    -o-transform: translate3d(0,0,0);
    -o-animation-duration: 1.5s;
    -o-animation-name: slidein;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;

    -ms-transform: translate3d(0,0,0);
    -ms-animation-duration: 1.5s;
    -ms-animation-name: slidein;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: alternate;

}

.loading:after {
    content: "\0020";

    display: block;
    width:1em;
    height: 1em;
    color:#fff;
    background: #000;
    border-radius: 1em;

    position:absolute;
    z-index: 1;
    right:0;
    bottom:50%;

    opacity:0;

    transform: translate3d(0,0,0);
    animation-duration: 1.3s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;

    -webkit-transform: translate3d(0,0,0);
    -webkit-animation-duration: 1.3s;
    -webkit-animation-name: slidein;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

    -moz-transform: translate3d(0,0,0);
    -moz-animation-duration: 1.3s;
    -moz-animation-name: slidein;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;

    -o-transform: translate3d(0,0,0);
    -o-animation-duration: 1.3s;
    -o-animation-name: slidein;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;

    -ms-transform: translate3d(0,0,0);
    -ms-animation-duration: 1.3s;
    -ms-animation-name: slidein;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: alternate;

}

@keyframes slidein
{
    from {
        opacity:0;
        right:100%;
    }
    to {
        opacity:0.5;
        right:0%;
    }
}

@-webkit-keyframes slidein
{
    from {
        opacity:0;
        right:100%;
    }
    to {
        opacity:0.5;
        right:0%;
    }
}

@-moz-keyframes slidein
{
    from {
        opacity:0;
        right:100%;
    }
    to {
        opacity:0.5;
        right:0%;
    }
}

@-o-keyframes slidein
{
    from {
        opacity:0;
        right:100%;
    }
    to {
        opacity:0.5;
        right:0%;
    }
}

@-ms-keyframes slidein
{
    from {
        opacity:0;
        right:100%;
    }
    to {
        opacity:0.5;
        right:0%;
    }
}

Usage

Very simple: add and remove the css class "loading" primarly in response of the user and net interactions: from ajax to images loading...

Examples

Loading...

Loading...

Sorry, no spinner (this time).