Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.loader {
  display: inline-grid;
  width: 45vmin;
  aspect-ratio: 1;
  animation: l12-0 3s linear infinite;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
}
.loader:before {
  clip-path: polygon(100% 50%,83.81% 59.06%,93.3% 75%,74.75% 74.75%,75% 93.3%,59.06% 83.81%,50% 100%,40.94% 83.81%,25% 93.3%,25.25% 74.75%,6.7% 75%,16.19% 59.06%,0% 50%,16.19% 40.94%,6.7% 25%,25.25% 25.25%,25% 6.7%,40.94% 16.19%,50% 0%,59.06% 16.19%,75% 6.7%,74.75% 25.25%,93.3% 25%,83.81% 40.94%);
  background: #1B325F;
  transform: rotate(0turn) translate(-12.5%) rotate(0turn);
  animation: 
    l12-1 2s linear infinite,
    l12-2 4s linear infinite alternate;
}
.loader:after {
  margin: 12.5%;
  clip-path: polygon(100% 50%,78.19% 60.26%,88.3% 82.14%,65% 75.98%,58.68% 99.24%,44.79% 79.54%,25% 93.3%,27.02% 69.28%,3.02% 67.1%,20% 50%,3.02% 32.9%,27.02% 30.72%,25% 6.7%,44.79% 20.46%,58.68% 0.76%,65% 24.02%,88.3% 17.86%,78.19% 39.74%);
  background: #9CC4E4;
  animation: l12-3 4s linear infinite alternate;
}
@keyframes l12-0 {to{rotate: 1turn;}}
@keyframes l12-1 {to{transform: rotate(-1turn) translate(-12.5%) rotate(.75turn);}}
@keyframes l12-2 {90%,to{clip-path: polygon(100% 50%,98.3% 62.94%,93.3% 75%,85.36% 85.36%,75% 93.3%,62.94% 98.3%,50% 100%,37.06% 98.3%,25% 93.3%,14.64% 85.36%,6.7% 75%,1.7% 62.94%,0% 50%,1.7% 37.06%,6.7% 25%,14.64% 14.64%,25% 6.7%,37.06% 1.7%,50% 0%,62.94% 1.7%,75% 6.7%,85.36% 14.64%,93.3% 25%,98.3% 37.06%)}}
@keyframes l12-3 {90%,to{clip-path: polygon(100% 50%,96.98% 67.1%,88.3% 82.14%,75% 93.3%,58.68% 99.24%,41.32% 99.24%,25% 93.3%,11.7% 82.14%,3.02% 67.1%,0% 50%,3.02% 32.9%,11.7% 17.86%,25% 6.7%,41.32% 0.76%,58.68% 0.76%,75% 6.7%,88.3% 17.86%,96.98% 32.9%)}}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  overflow: hidden;
}

Frontend Forever App