.circle-container{position:absolute;width:50vw;height:50vw}.arc-container{position:absolute;top:0;left:0;background-color:transparent;width:100%;height:100%}.arc-container .arc-circle{position:absolute;border-style:solid;width:100%;height:100%;border-radius:50%;border-color:transparent;border-top-color:#fff;border-width:3px 3px 0 0;animation:animate 3s linear infinite;filter:drop-shadow(0px 0px 4px white)}.arc-container .arc-circle .arc-dot{width:10px;height:10px;border-radius:50%;margin-left:85%;margin-top:14%;background-color:#fff;filter:drop-shadow(0 0 4px white)}@keyframes animate{to{transform:rotate(1turn)}}.gradiant-circle{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:transparent;border:3px solid white;-webkit-mask-image:linear-gradient(to right,white 0%,white 1%,rgba(255,255,255,.7) 1%,rgba(255,255,255,.5) 10%,rgba(255,255,255,.5) 10%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.5) 90%,rgba(255,255,255,.5) 90%,rgba(255,255,255,.7) 99%,white 99%,white 100%);mask-image:linear-gradient(to right,#fff 0% 1%,#ffffffb3 1%,#ffffff80 10% 10%,#ffffff1a 50%,#ffffff80 90% 90%,#ffffffb3 99%,#fff 99% 100%)}@media (max-width: 1024px){.circle-container{width:70vw;height:70vw}}@media (max-width: 720px){.circle-container{width:80vw;height:80vw}}