div.spinner{position:relative;width:54px;height:54px;display:inline-block;margin-left:50%;margin-right:50%;padding:10px;border-radius:10px}div.spinner div{width:6%;height:16%;background:#000;position:absolute;left:49%;top:43%;opacity:0;border-radius:50px;box-shadow:0 0 3px rgba(0,0,0,.2);animation:fade 1s linear infinite;-webkit-border-radius:50px;-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);-webkit-animation:fade 1s linear infinite}@keyframes fade{0%{opacity:1}to{opacity:.25}}div.spinner div.bar1{transform:rotate(0deg) translateY(-130%);animation-delay:0s;-webkit-transform:rotate(0deg) translateY(-130%);-webkit-animation-delay:0s}div.spinner div.bar2{transform:rotate(30deg) translateY(-130%);animation-delay:-.9167s;-webkit-transform:rotate(30deg) translateY(-130%);-webkit-animation-delay:-.9167s}div.spinner div.bar3{transform:rotate(60deg) translateY(-130%);animation-delay:-.833s;-webkit-transform:rotate(60deg) translateY(-130%);-webkit-animation-delay:-.833s}div.spinner div.bar4{transform:rotate(90deg) translateY(-130%);animation-delay:-.7497s;-webkit-transform:rotate(90deg) translateY(-130%);-webkit-animation-delay:-.7497s}div.spinner div.bar5{transform:rotate(120deg) translateY(-130%);animation-delay:-.667s;-webkit-transform:rotate(120deg) translateY(-130%);-webkit-animation-delay:-.667s}div.spinner div.bar6{transform:rotate(150deg) translateY(-130%);animation-delay:-.5837s;-webkit-transform:rotate(150deg) translateY(-130%);-webkit-animation-delay:-.5837s}div.spinner div.bar7{transform:rotate(180deg) translateY(-130%);animation-delay:-.5s;-webkit-transform:rotate(180deg) translateY(-130%);-webkit-animation-delay:-.5s}div.spinner div.bar8{transform:rotate(210deg) translateY(-130%);animation-delay:-.4167s;-webkit-transform:rotate(210deg) translateY(-130%);-webkit-animation-delay:-.4167s}div.spinner div.bar9{transform:rotate(240deg) translateY(-130%);animation-delay:-.333s;-webkit-transform:rotate(240deg) translateY(-130%);-webkit-animation-delay:-.333s}div.spinner div.bar10{transform:rotate(270deg) translateY(-130%);animation-delay:-.2497s;-webkit-transform:rotate(270deg) translateY(-130%);-webkit-animation-delay:-.2497s}div.spinner div.bar11{transform:rotate(300deg) translateY(-130%);animation-delay:-.167s;-webkit-transform:rotate(300deg) translateY(-130%);-webkit-animation-delay:-.167s}div.spinner div.bar12{transform:rotate(330deg) translateY(-130%);animation-delay:-.0833s;-webkit-transform:rotate(330deg) translateY(-130%);-webkit-animation-delay:-.0833s}