html, body, #root { height: 100%; margin: 0; padding: 0; } #root { background-repeat: no-repeat; background-size: 100% auto; } .loading-title { font-size: 1.1rem; } .loading-sub-title { margin-top: 20px; font-size: 1rem; color: #888; } .page-loading-warp { display: flex; align-items: center; justify-content: center; padding: 26px; } .ant-spin { position: absolute; display: none; box-sizing: border-box; margin: 0; padding: 0; color: rgba(0, 0, 0, 0.65); color: #1890ff; font-size: 14px; font-variant: tabular-nums; line-height: 1.5; text-align: center; list-style: none; opacity: 0; transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),-webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); font-feature-settings: "tnum"; } .ant-spin-spinning { position: static; display: inline-block; opacity: 1; } .ant-spin-dot { position: relative; display: inline-block; width: 20px; height: 20px; font-size: 20px; } .ant-spin-dot-item { position: absolute; display: block; width: 19px; height: 19px; background-color: #1890ff; border-radius: 100%; transform: scale(0.75); transform-origin: 50% 50%; opacity: 0.3; -webkit-animation: antspinmove 1s infinite linear alternate; animation: antSpinMove 1s infinite linear alternate; } .ant-spin-dot-item:nth-child(1) { top: 0; left: 0; } .ant-spin-dot-item:nth-child(2) { top: 0; right: 0; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .ant-spin-dot-item:nth-child(3) { right: 0; bottom: 0; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .ant-spin-dot-item:nth-child(4) { bottom: 0; left: 0; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .ant-spin-dot-spin { transform: rotate(45deg); animation: antRotate 1.2s infinite linear; } .ant-spin-lg .ant-spin-dot { width: 32px; height: 32px; font-size: 32px; } .ant-spin-lg .ant-spin-dot i { width: 14px; height: 14px; } @-webkit-keyframes antSpinMove { to { opacity: 1; } } @keyframes antSpinMove { to { opacity: 1; } } @-webkit-keyframes antRotate { to { transform: rotate(405deg); } } @keyframes antRotate { to { transform: rotate(405deg); } }