@charset "utf-8"; .app-loading-x { background: radial-gradient(#55A0FE, #1767CB); height: 100%; width: 100%; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 10000; } .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% { transform:translateX(-300px); opacity:0 } 33% { transform:translateX(0); opacity:1 } 66% { transform:translateX(0); opacity:1 } 100% { transform:translateX(300px);opacity:0 } }