JSFiddle - React, Tailwind, and code Playground

HTML

<div id="orbit">
    <div id="path">
        <div id="spider"></div>
    </div>
</div>

CSS

#orbit
{
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	height: 600px;
	border:3px solid #ffd800;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateX(80deg) rotateY(20deg);
}

#path
{
	width: 100%;
	height: 100%;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: pathRotate 2s infinite linear;
	background: rgba(0, 0, 0, 0.5)
}

#spider
{
	position: absolute;
	top: -5px;
	left: 50%;
	margin-left: -10px;
	width: 20px;
	height: 20px;
	z-index: 1;
	background: #000;
	-webkit-animation: rotateFix 2s infinite linear;
}

@-webkit-keyframes pathRotate {
    from {
        -webkit-transform: rotateZ(0deg);
    }
    to {
        -webkit-transform: rotateZ(360deg);
    }
}

@-webkit-keyframes rotateFix {
    from {
        -webkit-transform: rotateX(90deg) rotateY(0deg);
    }
    to {
        -webkit-transform: rotateX(90deg) rotateY(-360deg);
    }
}