html - Customer Loading Animation Keyframe/Background Position -


i'm trying create custom loading spinner using keyframes , spritesheet.

jsfiddle: http://jsfiddle.net/flignats/aaaaaf6h/

my issue spinner appears sliding (background position) , i'd stationary while spinning.

my css:

.hi {     width: 68px;     height: 68px;     background-image: url("data:image/png;base64, ... );      -webkit-animation: play 1s steps(23) infinite;        -moz-animation: play 1s steps(23) infinite;         -ms-animation: play 1s steps(23) infinite;          -o-animation: play 1s steps(23) infinite;             animation: play 1s steps(23) infinite; }  @-webkit-keyframes play {    { background-position:    0px; }      { background-position: -1496px; } }  @-moz-keyframes play {    { background-position:    0px; }      { background-position: -1496px; } }  @-ms-keyframes play {    { background-position:    0px; }      { background-position: -1496px; } }  @-o-keyframes play {    { background-position:    0px; }      { background-position: -1496px; } }  @keyframes play {    { background-position:    0px; }      { background-position: -1496px; } } 


Comments

Popular posts from this blog

html - Styling progress bar with inline style -

java - Oracle Sql developer error: could not install some modules -

How to use autoclose brackets in Jupyter notebook? -