#fel-load { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; width: 100%; } #fel-load > p { color: #4f4f9d; font-size: 24px; font-weight: bold; margin-bottom: 16px; } .fel-loader { width: 10px; height: 10px; border-radius: 50%; display: block; margin: 15px auto; position: relative; color: #4f4f9d; left: -100px; box-sizing: border-box; animation: shadowRolling 2s linear infinite; } @keyframes shadowRolling { 0% { box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); } 12% { box-shadow: 100px 0 #4f4f9d, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); } 25% { box-shadow: 110px 0 #4f4f9d, 100px 0 #4f4f9d, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0); } 36% { box-shadow: 120px 0 #4f4f9d, 110px 0 #4f4f9d, 100px 0 #4f4f9d, 0px 0 rgba(255, 255, 255, 0); } 50% { box-shadow: 130px 0 #4f4f9d, 120px 0 #4f4f9d, 110px 0 #4f4f9d, 100px 0 #4f4f9d; } 62% { box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #4f4f9d, 120px 0 #4f4f9d, 110px 0 #4f4f9d; } 75% { box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #4f4f9d, 120px 0 #4f4f9d; } 87% { box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #4f4f9d; } 100% { box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0); } }