.loader-container { text-align: center; }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader {  font-size: 10px; margin: 50px auto; text-indent: -9999em; overflow: hidden; width: 50px; height: 50px; border-radius: 50%; background: #333333 background:-moz-linear-gradient(left, #333333 10%, rgba(51, 51, 51, 0) 42%); background: -webkit-linear-gradient(left, #333333 10%, rgba(51, 51, 51, 0) 42%); background: -o-linear-gradient(left, #333333 10%, rgba(51, 51, 51, 0) 42%); background: -ms-linear-gradient(left, #333333 10%, rgba(51, 51, 51, 0) 42%); background: linear-gradient(to right, #333333 10%, rgba(51, 51, 51, 0) 42%); position: relative; z-index: 99; opacity: .2; animation: spin .7s linear infinite; }
.loader:before { width: 50%; height: 50%; background: #333333; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; }
.loader:after { background: #fff; width: 75%; height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
-webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); }