<div class="loader"></div>

.loader {
  background: #EFFAB4;
  mask: 
    linear-gradient(0deg,#0000 50px,#000 0) 0 25px,
    radial-gradient(25px,#000 99%,#0000 101%) 50% 0   /50px 50px repeat-x,
    radial-gradient(25px,#000 99%,#0000 101%) 50% 100%/50px 50px repeat-x;
  animation: b 1s linear infinite;
}
@keyframes b {
  to {
    mask-position: 0 25px, calc(50% + 50px) 0,calc(50% - 50px) 100%
  }
}
.loader:before {
  content:"";
  width: 369.623px;
  aspect-ratio: 1;
  display: block;
  margin: 0 auto;
  background: #FF9F80;
  aspect-ratio: 1;
  --g:/50px 50px radial-gradient(#000 70%,#0000 72%) no-repeat;
  mask: 100.000% 50.000% var(--g),97.553% 65.451% var(--g),90.451% 79.389% var(--g),79.389% 90.451% var(--g),65.451% 97.553% var(--g),50.000% 100.000% var(--g),34.549% 97.553% var(--g),20.611% 90.451% var(--g),9.549% 79.389% var(--g),2.447% 65.451% var(--g),0.000% 50.000% var(--g),2.447% 34.549% var(--g),9.549% 20.611% var(--g),20.611% 9.549% var(--g),34.549% 2.447% var(--g),50.000% 0.000% var(--g),65.451% 2.447% var(--g),79.389% 9.549% var(--g),90.451% 20.611% var(--g),97.553% 34.549% var(--g),radial-gradient(#000 70%,#0000 72%) 50%/315.688px 315.688px no-repeat;
  animation: inherit;
  animation-name: r;
}
@keyframes r {
  to {
    rotate: 18deg;
  }
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  align-content: center;
  overflow: hidden;
  background: #F56991;
}