div.spinner{position:relative;width:100px;height:100px;display:inline-block}div.spinner div{width:10%;height:29%;background:#000;position:absolute;left:44.5%;top:37%;opacity:0;-webkit-animation:fade 1s linear infinite;-webkit-border-radius:10px;-webkit-box-shadow:0 0 3px rgba(0,0,0,.2)}div.spinner div.bar1{-webkit-transform:rotate(0) translate(0,-142%);-webkit-animation-delay:0s}div.spinner div.bar2{-webkit-transform:rotate(30deg) translate(0,-142%);-webkit-animation-delay:-.9167s}div.spinner div.bar3{-webkit-transform:rotate(60deg) translate(0,-142%);-webkit-animation-delay:-833ms}div.spinner div.bar4{-webkit-transform:rotate(90deg) translate(0,-142%);-webkit-animation-delay:-.75s}div.spinner div.bar5{-webkit-transform:rotate(120deg) translate(0,-142%);-webkit-animation-delay:-667ms}div.spinner div.bar6{-webkit-transform:rotate(150deg) translate(0,-142%);-webkit-animation-delay:-.5833s}div.spinner div.bar7{-webkit-transform:rotate(180deg) translate(0,-142%);-webkit-animation-delay:-.5s}div.spinner div.bar8{-webkit-transform:rotate(210deg) translate(0,-142%);-webkit-animation-delay:-.41667s}div.spinner div.bar9{-webkit-transform:rotate(240deg) translate(0,-142%);-webkit-animation-delay:-333ms}div.spinner div.bar10{-webkit-transform:rotate(270deg) translate(0,-142%);-webkit-animation-delay:-.25s}div.spinner div.bar11{-webkit-transform:rotate(300deg) translate(0,-142%);-webkit-animation-delay:-.1667s}div.spinner div.bar12{-webkit-transform:rotate(330deg) translate(0,-142%);-webkit-animation-delay:-83.3ms}@-webkit-keyframes fade{from{opacity:1}to{opacity:.25}}div.spinner{position:relative;width:100px;height:100px;display:inline-block}div.spinner div{width:10%;height:29%;background:#000;position:absolute;left:44.5%;top:37%;opacity:0;-webkit-animation:fade 1s linear infinite;-webkit-border-radius:10px;-webkit-box-shadow:0 0 3px rgba(0,0,0,.2)}div.spinner div.bar1{-webkit-transform:rotate(0) translate(0,-142%);-webkit-animation-delay:0s}div.spinner div.bar2{-webkit-transform:rotate(30deg) translate(0,-142%);-webkit-animation-delay:-.9167s}div.spinner div.bar3{-webkit-transform:rotate(60deg) translate(0,-142%);-webkit-animation-delay:-833ms}div.spinner div.bar4{-webkit-transform:rotate(90deg) translate(0,-142%);-webkit-animation-delay:-.75s}div.spinner div.bar5{-webkit-transform:rotate(120deg) translate(0,-142%);-webkit-animation-delay:-667ms}div.spinner div.bar6{-webkit-transform:rotate(150deg) translate(0,-142%);-webkit-animation-delay:-.5833s}div.spinner div.bar7{-webkit-transform:rotate(180deg) translate(0,-142%);-webkit-animation-delay:-.5s}div.spinner div.bar8{-webkit-transform:rotate(210deg) translate(0,-142%);-webkit-animation-delay:-.41667s}div.spinner div.bar9{-webkit-transform:rotate(240deg) translate(0,-142%);-webkit-animation-delay:-333ms}div.spinner div.bar10{-webkit-transform:rotate(270deg) translate(0,-142%);-webkit-animation-delay:-.25s}div.spinner div.bar11{-webkit-transform:rotate(300deg) translate(0,-142%);-webkit-animation-delay:-.1667s}div.spinner div.bar12{-webkit-transform:rotate(330deg) translate(0,-142%);-webkit-animation-delay:-83.3ms}@-webkit-keyframes fade{from{opacity:1}to{opacity:.25}}