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);
}
}