CSS3 loading animation

by NOVUSIDEA

HTML

<div id="loading"></div>

CSS

body {
    background: #333;
}
/* Loading Animation */
#loading {
    z-index: 0;
    background: #fff;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -15px;
    margin-left: -15px;
    opacity: 1;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    -webkit-transition: opacity 10s;
    -moz-transition: opacity 10s;
    -ms-transition: opacity 10s;
    -o-transition: opacity 10s;
    transition: opacity 10s;
    /* for Safari and Chrome */
    -webkit-animation-name: loading;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: linear;
    /* for Firefox */
    -moz-animation-name: loading;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: linear;
    /* for Internet Explorer */
    -ms-animation-name: loading;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: linear;
    /* for Opera */
    -o-animation-name: loading;
    -o-animation-duration: 1s;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: linear;
    /* for all other browsers */
    animation-name: loading;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: linear;
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;
}
@-webit-keyframes loading {
	0% {
	    transform: scale(1);
        opacity: 0;
    }
	50% {
	    transform: scale(0.6);
        opacity: 1;
    }
	100% {
	    transform: scale(1);
        opacity: 0;
    }
}
@-moz-keyframes loading {
	0% {
	    transform: scale(1);
        opacity: 0;
    }
	50% {
	    transform: scale(0.6);
        opacity: 1;
    }
	100% {
	    transform: scale(1);
        opacity: 0;
   ...