body {
	background: black;
}

.main {
	width: 330px;
	height: 330px;
	border: 1px solid #ccc;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	border-radius: 50%;
}

.circle {
	width: 30px;
	height: 30px;
	background: cyan;
	border-radius: 50%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	margin: auto;
	animation: circle 4s linear infinite;
}

.triangle {
	width: 0px;
	height: 0px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	margin: auto;
	animation: triangle 4s linear infinite;

	/** Creates a triangle **/
	border: 30px solid transparent;
	border-right: 30px solid cyan;
}

@keyframes triangle {
	0% {
		transform: rotate(0deg) translateX(-82.5px);
	}
	100% {
		transform: rotate(360deg) translateX(-82.5px);
	}
}

@keyframes circle {
	0% {
		transform: rotate(0deg) translate(-165px);
	}
	100% {
		transform: rotate(360deg) translate(-165px);
	}
}