css3 动画 齿轮loading

<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
#loader-wrapper {
    width: 60px;
    height: 60px;
    margin: auto;
    position: relative;
}
.loader{ position: absolute; }
#loader1{
    color: #3A4652;
    font-size: 35px;
    text-align: center;
    width: 35px;
    height: 35px;
    top: -20px;
    left: 3px;
    animation: animate-1 1s infinite linear;
}
#loader2{
    color: #d72f2b;
    font-size: 50px;
    text-align: center;
    height: 50px;
    width: 50px;
    right: -12px;
    animation: animate-2 1s infinite linear;
}
#loader3{
    color: #3A4652;
    font-size: 35px;
    text-align: center;
    width: 35px;
    height: 35px;
    bottom: -10px;
    left: 3px;
    animation: animate-3 1s infinite linear;
}
@keyframes animate-1{
    100% { transform: rotate(-360deg); }
}
@keyframes animate-2{
    100% { transform: rotate(360deg); }
}
@keyframes animate-3{
    100% { transform: rotate(-360deg); }
}
</style>

<div id="loader-wrapper">
        <!-- <div id="loader1" class="fa fa-cog loader"></div> -->
                            <div id="loader1" class="fa fa-space-shuttle loader"></div>
                            <!-- <div id="loader2" class="fa fa-cog loader"></div> -->
                            <div id="loader2" class="fa fa-globe loader"></div>
                            <!-- <div id="loader3" class="fa fa-cog loader"></div> -->
                            <div id="loader3" class="fa fa-bug loader"></div>
                            
                        </div>