.container { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; min-height: 200rpx; } .loading { position: relative; width: 40px; border-radius: 20px; perspective: 500px; align-self: center; margin-top: 80rpx; } .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: #256742; box-shadow: 0 25px 40px #256742; } }