.preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999999; background: rgba(255, 255, 255, 0); } .preloader-container { display: flex!important; position: fixed!important; top: 0; left: 0; align-items: center; margin-top: 0; margin-left: 0; font-size: .88em; width: 100%; justify-content: center; height: 4px; background: #ffb307; } .no-js .preloader { display: none; } .preloader-loading-spinner, .preloader-loading-spinner:before { height: 4px; -webkit-border-radius: 2px; border-radius: 2px; width: 100%; } .preloader-loading-spinner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: rgba(255, 255, 255, 0.20); position: absolute; } .preloader.loading .preloader-loading-spinner:before { content: ''; background-color: rgba(255, 255, 255, .7); -webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @-webkit-keyframes running-progress { 0% { margin-left: 0; margin-right: 0; } 50% { margin-left: 25%; margin-right: 0%; } 100% { margin-left: 100%; margin-right: 0; } } @keyframes running-progress { 0% { margin-left: 0; margin-right: 0; } 50% { margin-left: 25%; margin-right: 0%; } 100% { margin-left: 100%; margin-right: 0; } }