CSS animation loader

CSS loader in HTML and CSS.

by William Green

HTML

<div id="projectContainer">
    <div id="loaderSuperContainer">
        <div id="loaderContainer">
            <div id="loaderCircle">
                <div id="loaderLineOne"></div>
                <div id="loaderLineTwo"></div>
            </div>
        </div>
    </div>
</div>

CSS

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

#projectContainer{
    background-color:#ddd;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
html,body{
    padding:0;
    margin:0;
}
#loaderSuperContainer{
    top:calc(50% - 25px);
    position:absolute;
    width:100%;
}
#loaderContainer{
    display:table;
    margin:auto;
}
#loaderCircle{
    background-color:transparent;
    width:50px;
    height:50px;
    border-radius:50%;
}
#loaderLineOne{
    width:4px;
    height:50px;
    background-color:#333;
    margin:auto;
    -o-animation:loaderLineOne 3s linear infinite;
    -o-animation-fill-mode:forwards;
    -moz-animation:loaderLineOne 3s linear infinite;
    -moz-animation-fill-mode:forwards;
    -webkit-animation:loaderLineOne 3s linear infinite;
    -webkit-animation-fill-mode:forwards;
    -ms-animation:loaderLineOne 3s linear infinite;
    -ms-animation-fill-mode:forwards;
    animation:loaderLineOne 3s linear infinite;
    animation-fill-mode:forwards;
}
#loaderLineTwo{
    width:50px;
    height:4px;
   ...