@-moz-keyframes atebits-loader { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 3% { -moz-transform: rotate(90deg); transform: rotate(90deg); } 10% { -moz-transform: rotate(90deg); transform: rotate(90deg); } 13% { -moz-transform: rotate(180deg); transform: rotate(180deg); } 20% { -moz-transform: rotate(180deg); transform: rotate(180deg); } 23% { -moz-transform: rotate(90deg); transform: rotate(90deg); } 30% { -moz-transform: rotate(90deg); transform: rotate(90deg); } 33% { -moz-transform: rotate(180deg); transform: rotate(180deg); } 40% { -moz-transform: rotate(180deg); transform: rotate(180deg); } 43% { -moz-transform: rotate(270deg); transform: rotate(270deg); } 50% { -moz-transform: rotate(270deg); transform: rotate(270deg); } 53% { -moz-transform: rotate(180deg); transform: rotate(180deg); } 60% { -moz-transform: rotate(180deg); transform: rotate(180deg); } 63% { -moz-transform: rotate(90deg); transform: rotate(90deg); } 70% { -moz-transform: rotate(90deg); transform: rotate(90deg); } 73% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 80% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 83% { -moz-transform: rotate(-90deg); transform: rotate(-90deg); } 90% { -moz-transform: rotate(-90deg); transform: rotate(-90deg); } 93% { -moz-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes atebits-loader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 3% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 10% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 13% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 20% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 23% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 30% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 33% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 40% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 43% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 50% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 53% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 60% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 63% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 70% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 73% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 80% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 83% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 90% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 93% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes atebits-loader { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 3% { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } 10% { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } 13% { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 20% { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 23% { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } 30% { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } 33% { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 40% { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 43% { -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); } 50% { -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); } 53% { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 60% { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } 63% { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } 70% { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } 73% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 80% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 83% { -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 90% { -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 93% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } } /* :not(:required) hides this rule from IE9 and below */ .atebits-loader:not(:required) { background: rgba(0, 0, 0, 0.5); display: inline-block; width: 9px; height: 9px; overflow: hidden; position: relative; text-indent: -9999px; -moz-box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0; -webkit-box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0; box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0; -moz-animation: atebits-loader 8s infinite ease-in-out; -webkit-animation: atebits-loader 8s infinite ease-in-out; animation: atebits-loader 8s infinite ease-in-out; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }