.loading { text-align: center; position: fixed; width: 100%; height: 100%; overflow: hidden; z-index: 99999; background-color: #f2f2f2; } .loading_night { background-color: #303133; } .loading-wrapper { position: fixed; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .loading-text { line-height: 1.4; font-size: 1.2rem; font-weight: bold; margin-bottom: 1rem; } .loading-anim { width: 35px; height: 35px; border: 5px solid rgba(189, 189, 189, 0.25); border-left-color: rgba(66, 185, 131, 0.9); border-top-color: rgba(66, 185, 131, 0.9); border-radius: 50%; display: inline-block; animation: rotate 600ms infinite linear; } @keyframes rotate { to { transform: rotate(1turn) } }