@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } #paginate, #infscr-loading { margin-top: 10px; padding: 8px 0; text-align: center; width: 100%; display: block; clear: both; } .loaded { animation: fade-in 0.16s linear; } .loader { mask-image: image-url('static-loader.png'); animation: spin 1s infinite ease-in-out, fade-in 0.2s ease-in; background-image : image-url("static-loader.png"); display: inline-block; width : 14px; height: 14px; &.hidden{ display : none; } }