css3实现圆环loading

<div class="g-container">
    <div class="g-circle"></div>
</div>

body,html {
   
    width:100%;
    height:100%;
    display:flex;
    background:#333;
}
.g-container {
   
    position:relative;
    width:200px;
    height:200px;
    margin:auto;
    border-radius:50%;
    box-sizing:border-box;
    border:6px solid #444;
}
.g-circle {
   
    position:absolute;
    top:-6px;
    left:-6px;
    bottom:-6px;
    right:-6px;
    border-radius:50%;
    background:conic-gradient(#fc0 0%,transparent 40%,transparent);
    animation:rotate 3s ease-in-out infinite;
    transition-origin:50% 50%;
}
.g-circle::before {
   
    content:"";
    position:absolute;
    top:6px;
    left:6px;
    bottom:6px;
    right:6px;
    background:#333;
    border-radius:50%;
    // z-index:1;
}
.g-circle::after {
   
    content:"";
    position:absolute;
    width:12px;
    height:12px;
    top:0;
    left:50%;
    transform:translate(-50%,-3px);
    border-radius:50%;
    background:#fc0;
    box-shadow:0 0 4px 2px #fc0;
}
@keyframes rotate {
   
    100% {
   
    transform:rotate(-360deg);
}
}