@-webkit-keyframes spin-rotate { 0% { -webkit-transform : rotate(0deg); transform : rotate(0deg); } 50% { -webkit-transform : rotate(-180deg); transform : rotate(-180deg); } 100% { -webkit-transform : rotate(-360deg); transform : rotate(-360deg); } } @-moz-keyframes spin-rotate { 0% { -moz-transform : rotate(0deg); transform : rotate(0deg); } 50% { -moz-transform : rotate(-180deg); transform : rotate(-180deg); } 100% { -moz-transform : rotate(-360deg); transform : rotate(-360deg); } } @-o-keyframes spin-rotate { 0% { -o-transform : rotate(0deg); transform : rotate(0deg); } 50% { -o-transform : rotate(-180deg); transform : rotate(-180deg); } 100% { -o-transform : rotate(-360deg); transform : rotate(-360deg); } } @keyframes spin-rotate { 0% { -webkit-transform : rotate(0deg); -moz-transform : rotate(0deg); -o-transform : rotate(0deg); transform : rotate(0deg); } 50% { -webkit-transform : rotate(-180deg); -moz-transform : rotate(-180deg); -o-transform : rotate(-180deg); transform : rotate(-180deg); } 100% { -webkit-transform : rotate(-360deg); -moz-transform : rotate(-360deg); -o-transform : rotate(-360deg); transform : rotate(-360deg); } } .semi-circle-spin { position : relative; width : 35px; height : 35px; overflow : hidden; } .semi-circle-spin > div { position : absolute; border-width : 0; border-radius : 100%; -webkit-animation : spin-rotate 0.6s 0s infinite linear; -moz-animation : spin-rotate 0.6s 0s infinite linear; -o-animation : spin-rotate 0.6s 0s infinite linear; animation : spin-rotate 0.6s 0s infinite linear; background-image : -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), color-stop(30%, #55595C), to(#55595C)); background-image : -webkit-linear-gradient(transparent 0%, transparent 70%, #55595C 30%, #55595C 100%); background-image : -moz-linear-gradient(transparent 0%, transparent 70%, #55595C 30%, #55595C 100%); background-image : -o-linear-gradient(transparent 0%, transparent 70%, #55595C 30%, #55595C 100%); background-image : linear-gradient(transparent 0%, transparent 70%, #55595C 30%, #55595C 100%); width : 100%; height : 100%; }