/* components/page-loading/page-loading.wxss */ .page-body { width: 100vw; height: 100vh; background-color: rgba(255, 255, 255, 1); height: 100%; width: 100%; position: fixed; z-index: 1; margin-top: 0px; top: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .loading { position: relative; width: 50px; border-radius: 25px; } .loading:before, .loading:after { position: absolute; width: 20px; height: 20px; border-radius: 20px; content: ""; animation: jumping 0.5s infinite alternate; background: rgba(0, 0, 0, 0); } .loading:before { left: 0; } .loading:after { right: 0; animation-delay: 0.15s; } @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; } }