cool spinner

by Amanda Williamson

HTML

<div class="loading bar">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

CSS

.loading{
	width:100px;
	height:100px;
	margin:30px auto;
	position:relative;
}

.bar div{    
    width: 10px;
    height: 30px;
    background: black;
    position: absolute;
    top: 35px;
    left: 45px;
    opacity:1;
    -webkit-animation: fadeit 1.1s linear infinite;
    animation: fadeit 1.1s linear infinite;
}


.bar div:nth-child(1){
      -webkit-transform: rotate(0deg) translate(0, -30px);
      transform: rotate(0deg) translate(0, -30px);

      -webkit-animation-delay:0.91s;
      animation-delay:0.91s;
    }
    .bar div:nth-child(2){
      -webkit-transform: rotate(30deg) translate(0, -30px);
      transform: rotate(30deg) translate(0, -30px);

      -webkit-animation-delay:1.04s;
      animation-delay:1.04s;
    }
    .bar div:nth-child(3){
      -webkit-transform: rotate(60deg) translate(0, -30px);
      transform: rotate(60deg) translate(0, -30px);

      -webkit-animation-delay:1.17s;
      animation-delay:1.17s;
    }
    .bar div:nth-child(4){
      -webkit-transform: rotate(90deg) translate(0, -30px);
      transform: rotate(90deg) translate(0, -30px);

       -webkit-animation-delay:1.3s;
      animation-delay:1.3s;
    }
    .bar div:nth-child(5){
      -webkit-transform: rotate(120deg) translate(0, -30px);
      transform: rotate(120deg) translate(0, -30px);

      -webkit-animation-delay:0.91s;
      animation-delay:0.91s;
    }
    .bar div:nth-child(6){
      -webkit-transform: rotate(150deg) translate(0, -30px);
      transform: rotate(150deg) translate(0, -30px);

      -webkit-animation-delay:1.04s;
      animation-delay:1.04s;
    }
    .bar div:nth-child(7){
      -webkit-transform: rotate(180deg) translate(0, -30px);
      transform: rotate(180deg) translate(0, -30px);

      -webkit-animation-delay:1.17s;
      animation-delay:1.17s;
    }
.bar div:nth-child(8){
      -webkit-transform: rotate(210deg) translate(0, -30px);
      transform: rotate(210deg) translate(0, -30px);

      -webkit-animation-delay:1.3s;
     ...