.mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.2); } .popup-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; width: 150px; height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 10px; } .progress { margin-top: 10px; color: var(--primary-color); } .hint-text { font-size: 14px; color: #333333; font-weight: bold; animation: colorChange 3s infinite alternate; } @keyframes colorChange { 0% { color: #666666; } 20% { color: #999999; } 40% { color: #CCCCCC; } 60% { color: #999999; } 80% { color: #666666; } 100% { color: #333333; } } .loading { position: relative; width: 48px; height: 48px; animation: satellite 3s infinite linear; border: 1px solid var(--primary-color); border-radius: 100%; } .loading:before, .loading:after { position: absolute; left: 1px; top: 1px; width: 12px; height: 12px; content: ""; border-radius: 100%; background-color: var(--primary-color); box-shadow: 0 0 10px var(--primary-color); } .loading:after { right: 0; width: 20px; height: 20px; margin: 13px; } @keyframes satellite { from { transform: rotate(0) translateZ(0); } to { transform: rotate(360deg) translateZ(0); } }