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