.preloader { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background-color: $white-color; .vs-btn { padding: 15px 20px; border-radius: 0; font-size: 14px; } } .preloader-inner { text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); img { display: block; margin: 0 auto 25px auto; } } .loader { display: block; position: relative; height: 20px; width: 140px; margin: 0 auto; background-image: linear-gradient($theme-color 20px, transparent 0), linear-gradient($theme-color 20px, transparent 0), linear-gradient($theme-color 20px, transparent 0), linear-gradient($theme-color 20px, transparent 0); background-repeat: no-repeat; background-size: 20px auto; background-position: 0 0, 40px 0, 80px 0, 120px 0; animation: animloader 1s linear infinite; } @keyframes animloader { 0% { background-image: linear-gradient($theme-color 20px, transparent 0), linear-gradient($theme-color 20px, transparent 0), linear-gradient($theme-color 20px, transparent 0), linear-gradient($theme-color 20px, transparent 0); } 25% { background-image: linear-gradient($theme-color2 20px, transparent 0), linear-gradient($theme-color 20px, transparent 0), linear-gradient($theme-color 20px, transparent 0), linear-gradient($theme-color 20px, transparent 0); } 50% { background-image: linear-gradient($theme-color2 20px, transparent 0), linear-gradient($theme-color2 20px, transparent 0), linear-gradient($theme-color 20px, transparent 0), linear-gradient($theme-color 20px, transparent 0); } 75% { background-image: linear-gradient($theme-color2 20px, transparent 0), linear-gradient($theme-color2 20px, transparent 0), linear-gradient($theme-color2 20px, transparent 0), linear-gradient($theme-color 20px, transparent 0); } 100% { background-image: linear-gradient($theme-color2 20px, transparent 0), linear-gradient($theme-color2 20px, transparent 0), linear-gradient($theme-color2 20px, transparent 0), linear-gradient($theme-color2 20px, transparent 0); } }