#loading-box .loading-left-bg, #loading-box .loading-right-bg { position: fixed; z-index: 999998; width: 50%; height: 100%; background-color: rgb(81 81 81 / 80%); transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01); backdrop-filter: blur(10px); } #loading-box .loading-right-bg { right: 0; } #loading-box > .spinner-box { position: fixed; z-index: 999999; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } #loading-box .spinner-box .loading-word { position: absolute; color: #ffffff; font-size: 0.95rem; transform: translateY(64px); text-align: center; } p.loading-title { font-size: 1.25rem; margin: 20px 10px 4px 10px; } #loading-box .spinner-box .configure-core { width: 100%; height: 100%; background-color: #37474f; } div.loaded div.loading-left-bg { transform: translate(-100%, 0); } div.loaded div.loading-right-bg { transform: translate(100%, 0); } div.loaded div.spinner-box { display: none !important; } .loader { position: absolute; top: calc(50% - 32px); left: calc(50% - 32px); width: 64px; height: 64px; border-radius: 50%; perspective: 800px; transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01); } .inner { position: absolute; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; } .inner.one { left: 0%; top: 0%; animation: rotate-one 1s linear infinite; border-bottom: 3px solid #efeffa; } .inner.two { right: 0%; top: 0%; animation: rotate-two 1s linear infinite; border-right: 3px solid #efeffa; } .inner.three { right: 0%; bottom: 0%; animation: rotate-three 1s linear infinite; border-top: 3px solid #efeffa; } @keyframes rotate-one { 0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @keyframes rotate-two { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @keyframes rotate-three { 0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }