/* Loading indicator: */ @-webkit-keyframes tux-loading-indicator-spin { from { -webkit-transform: rotate( 0deg ); } to { -webkit-transform: rotate( 360deg ); } } @keyframes tux-loading-indicator-spin { from { transform: rotate( 0deg ); } to { transform: rotate( 360deg ); } } .tux-loading-indicator { float: left; background: transparent url( ../images/loading.gif ) right bottom no-repeat; /* @embed */ background-image: linear-gradient( transparent, transparent ), url( ../images/loading.svg ); background-size: 100%; -webkit-animation-name: tux-loading-indicator-spin; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-name: tux-loading-indicator-spin; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; height: 34px; width: 34px; backface-visibility: hidden; } .tux-loading-indicator--centered { top: 50%; left: 50%; position: absolute; } .tux-loading-indicator--stopped { -webkit-animation: none; animation: none; }