react-pacman-progress.css

.pacman-progress {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transition: all 1s ease-in-out 0.2s;
}
.pacman {
  position: absolute;
  transition: left 0.3s ease-in-out 0.2s;
  width: 20px;
  height: 20px;
  transform: translate(-5px, -5px);
}
.pacman::before {
  position: absolute;
  content: " ";
  width: 20px;
  height: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: #FFF;
}

.pacman::after {
  position: absolute;
  content: " ";
  width: 20px;
  height: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #FFF;
  top: 10px;
}

.pacman.even::before {
  animation: pacman-top 0.12s linear alternate both;
  animation-iteration-count: 10;
}
.pacman.even::after {
  animation: pacman-bottom 0.12s linear alternate both;
  animation-iteration-count: 10;
}
.pacman.odd::before {
  animation: pacman-top-bis 0.12s linear alternate both;
  animation-iteration-count: 10;
}
.pacman.odd::after {
  animation: pacman-bottom-bis 0.12s linear alternate both;
  animation-iteration-count: 10;
}

.point {
  position: absolute;
  float: left;
  background: transparent;
  width: 10px;
  height: 10px;
  border-width: 2px;
  border-style: solid;
  border-color: #FFF;
  border-radius: 50%;
  transition: all 0.01s ease-out 0.4s;
}
.point.current {
  opacity: 0;
  background: #FFF;
}
.point.done {
  display: none;
}

@keyframes pacman-top {
  0% {transform: rotateZ(0deg);}
  100% {transform: rotateZ(-30deg);}
}
@keyframes pacman-top-bis {
  0% {transform: rotateZ(0deg);}
  100% {transform: rotateZ(-30deg);}
}
@keyframes pacman-bottom {
  0% {transform: rotateZ(0deg);}
  100% {transform: rotateZ(30deg);}
}
@keyframes pacman-bottom-bis {
  0% {transform: rotateZ(0deg);}
  100% {transform: rotateZ(30deg);}
}