Loader in CSS and HTML

This loader is created out of pure HTML and CSS.

by William Green

HTML

<div id="projectContainer">
    <div id="loaderSuperContainer">
        <div id="loaderContainer">
            <div id="circleOne" class="circle"></div>
            <div id="circleTwo" class="circle"></div>
            <div id="circleThree" class="circle"></div>
            <div id="circleFour" class="circle"></div>
            <div id="circleFive" class="circle"></div>
            <div id="circleSix" class="circle"></div>
        </div>
    </div>
</div>

CSS

/*
Created by William Green (15) in California
Email [email protected] with any questions.
*/
 @-o-keyframes loader {
    0% {
        -o-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -o-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@-moz-keyframes loader {
    0% {
        -o-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -o-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@-webkit-keyframes loader {
    0% {
        -o-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -o-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@-ms-keyframes loader {
    0% {
        -o-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100% {
        -o-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
@keyframes loader {
    0% {
        -o-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
       ...