<div class="loader">
	<div class="coin">
		<div class="oval">
			<div class="inner-oval"></div>
		</div>
		 
		<div class="coin__edge">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
     <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

  </div>
		<div class="oval-back">
			<div class="inner-oval"></div>
		</div>
		<div class="oval-shadow"></div>
	</div>
	
</div>
.loader {
	height: 400px;
	display: flex; /* establish flex container */
	flex-direction: column; /* make main axis vertical */
	justify-content: center; /* center items vertically, in this case */
	align-items: center; /* center items horizontally, in this case */
}

$coin-diameter: 200px;
$coin-thickness: 20px;
$coin-color: #fdda51;
$edge-faces: 80;
$edge-face-length: 3.14*$coin-diameter/$edge-faces;
$turn-time: 4s;
$coin-front: "https://trailblazer.me/resource/1570583584000/assets/assets/images/astro-thinking.svg?orgId=00D1I000001WM1N";
$coin-back: "https://purepng.com/public/uploads/large/purepng.com-pirate-flagpirateact-of-robberycriminalviolenceshipboatattackerspirates-142152696247741y3d.png";

.coin {
	position: relative;
	width: $coin-diameter;
	height: $coin-diameter;
	// margin: 50px auto;
	-webkit-transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	animation: rotate3d $turn-time linear infinite;
	transform-style: preserve-3d;
	transition: all 0.3s;
}

@keyframes rotate3d {
	0% {
		transform: perspective(1000px) rotateY(0deg);
	}

	100% {
		transform: perspective(1000px) rotateY(360deg);
	}
}

.oval {
	// background-image: url($coin-front);
	// background-size: cover;
	transform: translateZ($coin-thickness/2);
}
.oval-back {
	// background-image: url($coin-back);
	// background-size: cover;
	transform: translateZ(-$coin-thickness/2) rotateY(180deg);
	.inner-oval {
		background-image: url($coin-back) !important;
		background-position: center center !important;
	}
}

.oval,
.oval-back {
	position: absolute;
	width: $coin-diameter;
	height: $coin-diameter;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(90deg, #fdda51 0%, #fca741 100%);
	// border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	// height: 200px;
	// width: 200px;

	.inner-oval {
		background: linear-gradient(90deg, #fdda51 0%, #fca741 100%);
		box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		padding-top: 0.125rem;
		width: 170px;
		height: 170px;
		background-image: url($coin-front);
		background-size: 80%;
		background-repeat: no-repeat;
		background-position: bottom center;
	}
}

.oval,
.oval-back {
	//background-color: $coin-color;

	&:after {
		content: "";
		position: absolute;
		left: -$coin-diameter/2;
		bottom: 100%;
		display: block;
		height: $coin-diameter/1.5;
		width: $coin-diameter*2;
		background: #fff;
		opacity: 0.4;
		animation: shine linear $turn-time/2 infinite;
	}
}
.coin__edge {
	@for $i from 1 through $edge-faces {
		div:nth-child(#{$i}) {
			position: absolute;
			height: $edge-face-length;
			width: $coin-thickness;
			background: darken(
				$coin-color,
				 ( ($i - $edge-faces/2) * ($i - $edge-faces/2)) /
					(
						$edge-faces*$edge-faces/4
					) * 100 * 0.7
			);
			transform: translateY(#{$coin-diameter/2-$edge-face-length/2})
				translateX(#{$coin-diameter/2-$coin-thickness/2})
				rotateZ(360deg/$edge-faces*$i+90) translateX(#{$coin-diameter/2})
				rotateY(90deg);
		}
	}
}
.oval-shadow {
	position: absolute;
	width: $coin-diameter;
	height: 10px;
	border-radius: 50%;
	background: #000;
	box-shadow: 0 0 $coin-thickness*5 $coin-thickness*5 #000;
	opacity: 0.125;
	// transform: rotateX(90deg) translateZ(-$coin-diameter*1.1) scale(0.5);
	transform: rotateX(90deg) translateZ(-$coin-diameter*1.1) scale(0.5);
}

@keyframes shine {
	0%,
	15% {
		transform: translateY($coin-diameter*2) rotate(-40deg);
	}
	50% {
		transform: translateY(-$coin-diameter) rotate(-40deg);
	}
}
@keyframes turn {
	0% {
		transform: rotateY(-180deg);
	}
	100% {
		transform: rotateY(180deg);
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.