internet explorer - css spinner keyframe animation wobbly in IE -
i've seen several people having problems "wobbly" spinner animations in ie , of time, using image instead of animating border proposed, won't work me since img takes long load in ie , won't displayed in time. (website starts reloading , no spinner shown @ all.) therefore, wanted ask if has idea on fixing code used in company (less):
@keyframes spinaround { { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } { -moz-transform: rotate(359deg); -ms-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .is-loading { display: inline; position: absolute; top: 50%; box-sizing: inherit; &::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, .8); box-sizing: inherit; } &::after { height: 12px; width: 12px; margin-left: -10px; margin-top: -10px; border-width: 4px; border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, .4) rgba(255, 255, 255, .4) rgba(255, 255, 255, .4); top: 50%; content: ""; display: block; position: absolute; border-style: solid; border-radius: 50%; animation: spinaround 700ms infinite linear; box-sizing: inherit; } } i toggle class on div. works perfect in chrome or ff, due ie border-radius problem jumpy/bumpy in ie.
thanks ahead ideas :)
Comments
Post a Comment