Loader шестеренка
by LuckyCat
HTML
<div class="mjlogo">
<div class="cogwheel">
<div class="wheel wheel2">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b5"></b>
<b class="b6"></b>
<b class="b7"></b>
<b class="b8"></b>
<b class="b9"></b>
<b class="b10"></b>
<b class="b11"></b>
<b class="b12"></b>
</div>
<div class="wheel">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b5"></b>
<b class="b6"></b>
<b class="b7"></b>
<b class="b8"></b>
<b class="b9"></b>
<b class="b10"></b>
<b class="b11"></b>
<b class="b12"></b>
</div>
<div class="cogwheel2">
<div class="wheel wheel2">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b5"></b>
<b class="b6"></b>
<b class="b7"></b>
<b class="b8"></b>
<b class="b9"></b>
<b class="b10"></b>
<b class="b11"></b>
<b class="b12"></b>
</div>
<div class="wheel">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b5"></b>
<b class="b6"></b>
<b class="b7"></b>
<b class="b8"></b>
<b class="b9"></b>
<b class="b10"></b>
<b class="b11"></b>
<b class="b12"></b>
</div>
<div class="cogwheel3">
<div class="wheel wheel2">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b5"></b>
<b class="b6"></b>
<b class="b7"></b>
<b class="b8"></b>
<b class="b9"></b>
<b class="b10"></b>
<b class="b11"></b>
<b class="b12"></b>
</div>
<div class="wheel">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b5"></b>
<b class="b6"></b>
<b class="b7"></b>
<b class="b8"></b>
<b class="b9"></b>
<b class="b10"></b>
<b class="b11"></b>
<b class="b12"></b>
</div>
</div>
</div>CSS
/****************** COGWHEEL ******************/
* {
padding: 0;
margin: 0;
}
body {
background: green;
}
.mjlogo {
position: relative;
}
.mjlogo .cogwheel,
.mjlogo .cogwheel2,
.mjlogo .cogwheel3 {
position:absolute;
top:100px;
left:0;
display:block;
width:50px;
height:50px;
left:65px;
}
.mjlogo .cogwheel2 {
left: -30px;
top: 30px;
}
.mjlogo .cogwheel3 {
left: 40px;
top: 10px;
}
.mjlogo .wheel{
position:absolute;
z-index:6;
width:50px;
height:50px;
top:0;
left:0;
}
.mjlogo .wheel2{
z-index:5;
}
.mjlogo .circle{
position:absolute;
border:0px solid #C9243F;
top:10px;
left:10px;
width:10px;
height:10px;
border-radius:100%;
border-width:10px;
}
.mjlogo .wheel b,
.mjlogo .cogwheel2 .wheel b,
.mjlogo .cogwheel3 .wheel b {
height:0px;
border:0px solid rgba(0,0,0,0);
border-bottom-color:#C9243F;
position:absolute;
top:5px;
left:20px;
width: 5px;
border-width:0 3px 14px 3px;
-webkit-transform-origin: 5px 20px;
-moz-transform-origin:5px 20px;
transform-origin:5px 20px;
}
.mjlogo .cogwheel2 .wheel b {
border-bottom-color:#000;
}
.mjlogo .cogwheel3 .wheel b {
border-bottom-color:#ccc;
top:5px;
left:20px;
width: 5px;
border-width:0 3px 14px 3px;
}
.mjlogo .wheel2 b{
border-bottom-color:none;
left:19px;
top:4px;
width: 7px;
border-width:0 3px 16px 3px;
-webkit-transform-origin: 6px 21px;
-moz-transform-origin: 6px 21px;
transform-origin: 6px 21px;
}
.mjlogo .wheel b.b2{
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
transform:rotate(30deg);
}
.mjlogo .wheel b.b3{
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
transform:rotate(60deg);
}
.mjlogo .wheel b.b4{
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
transform:rotate(90deg);
}
.mjlogo .wheel b.b5{
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
...