@charset "utf-8"; .app-loading-x { position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(#55A0FE, #1767CB); } .app-loading-x-container { position: absolute; top: 50%; width: 100%; color: #fff; text-align: center; transform: translateY(-50%); } .app-loading-x-container label { display: inline-block; font-size: 20px; opacity: 0; } .app-loading-x-container label:nth-child(6) { animation: loading 3s infinite ease-in-out } .app-loading-x-container label:nth-child(5) { animation: loading 3s .1s infinite ease-in-out } .app-loading-x-container label:nth-child(4) { animation: loading 3s .2s infinite ease-in-out } .app-loading-x-container label:nth-child(3) { animation: loading 3s .3s infinite ease-in-out } .app-loading-x-container label:nth-child(2) { animation: loading 3s .4s infinite ease-in-out } .app-loading-x-container label:nth-child(1) { animation: loading 3s .5s infinite ease-in-out } @keyframes loading{ 0% { opacity:0; transform:translateX(-300px) } 33% { opacity:1; transform:translateX(0) } 66% { opacity:1; transform:translateX(0) } 100% {opacity:0; transform:translateX(300px) } }