.container { /* display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 200rpx; */ width: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; background-color: transparent; } .loading { position: relative; width: 40px; border-radius: 20px; perspective: 500px; align-self: center; margin-top: 40%; } .loading:before, .loading:after { position: absolute; width: 15px; height: 15px; content: ""; border-radius: 20px; animation: jumping 0.5s infinite alternate; background: rgba(0, 0, 0, 0); } .loading:before { left: 0; } .loading:after { right: 0; animation-delay: 0.15s; } .loading_err { display: flex; flex-direction: row; justify-content: center; width: 150px; align-items: center; height: 100px; align-self: center; } @keyframes jumping { 0% { transform: scale(1) translateY(0px) rotateX(0deg); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 100% { transform: scale(1.2) translateY(-25px) rotateX(45deg); background: #FE9944; box-shadow: 0 25px 40px #FE9944; } } .error-box { /* display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: auto; margin-top: 20%; */ display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: center; min-height: 200px; }