.Loading{ .wrapper { width: 200px; height: 60px; position: relative; left: 40%; z-index: 1; } .circle { width: 20px; height: 20px; position: absolute; border-radius: 50%; background-color: var(--fifthly); left: 15%; transform-origin: 50%; animation: circle7124 .5s alternate infinite ease; } @keyframes circle7124 { 0% { top: 60px; height: 5px; border-radius: 50px 50px 25px 25px; transform: scaleX(1.7); } 40% { height: 20px; border-radius: 50%; transform: scaleX(1); } 100% { top: 0%; } } .circle:nth-child(2) { left: 45%; animation-delay: .2s; } .circle:nth-child(3) { left: auto; right: 15%; animation-delay: .3s; } .shadow { width: 20px; height: 4px; border-radius: 50%; background-color: var(--fifthly); position: absolute; opacity: .5; top: 62px; transform-origin: 50%; z-index: -1; left: 15%; filter: blur(1px); animation: shadow046 .5s alternate infinite ease; } @keyframes shadow046 { 0% { transform: scaleX(1.5); } 40% { transform: scaleX(1); opacity: .7; } 100% { transform: scaleX(.2); opacity: .4; } } .shadow:nth-child(4) { left: 45%; animation-delay: .2s } .shadow:nth-child(5) { left: auto; right: 15%; animation-delay: .3s; } } .loading_page{ width: 100vw !important;height: 50vh !important; display: flex !important;justify-content: space-between !important;align-items: center !important; flex-direction: column; } :where(.css-dev-only-do-not-override-1ae8k9u).ant-spin .ant-spin-dot-item ,:where(.css-1adbn6x).ant-spin .ant-spin-dot-item{ background-color: var(--primary); } :where(.css-dev-only-do-not-override-1ae8k9u).ant-spin, :where(.css-1adbn6x).ant-spin .ant-spin-dot-item{ color: var(--primary); } .spinner{ color: var(--primary); padding-block: 30px; }