Pacman loading animation in one div

index.html

<div class='pac-man' />

Pacman loading animation in one div.markdown

Pacman loading animation in one div

Version recreated in one DIV

To modify the animation, change either @primaryClr or @ballSize for a different color and a different size.

Forked from Tim Guo's Pen Pacman loading animation.

A Pen by Iddar Olivares on CodePen.

License.

style.css

/* LESS Vars */
@primaryClr: #fed75a; // Adjust this value to change the color
@pacman-zise: 70px;

body {
  background: #1d1d1d;
  height: 100%;
}

.pac-man {
  border-radius: 50%;
  margin: 0 auto;
  margin-top: calc(50%
    - (@pacman-zise / 2));
  border-radius: 100em 100em 0 0;
  background: #f00;
  transform-origin: bottom;
  animation: eating-top .5s infinite;
  
  &, &::before {
    width: @pacman-zise;
    height: calc(@pacman-zise/2);
    background: @primaryClr;
  }
  
  &::before {
    content: '';
    display: block;
    margin-top: calc(@pacman-zise/2);
    position: absolute;
    transform-origin: top;
    border-radius: 0 0 100em 100em;
    transform: rotate(80deg);
    animation: eating-bottom .5s infinite;
  }
  
  &::after {
    position: absolute;
    border-radius: 100em;
    content: '';
    display: block;
    height: 20px;
    width: 20px;
    margin-top: calc((@pacman-zise / 2) - 10px);
    margin-left: calc((@pacman-zise / 2) - 10px);
    transform-origin: center;
    animation: 
      center .5s infinite,
      ball .5s -.33s infinite linear;
  }
}

@keyframes eating-top{
  0%{ transform: rotate(-40deg); }
  50% { transform: rotate(0deg); }
  100%{ transform: rotate(-40deg); }
}

@keyframes eating-bottom{
  0%{ transform: rotate(80deg); }
  50% { transform: rotate(0deg); }
  100%{ transform: rotate(80deg); }
}

@keyframes center{
  0%{ transform: rotate(40deg); }
  50% { transform: rotate(0deg); }
  100%{ transform: rotate(40deg); }
}

@keyframes ball{
  0%{ 
    opacity: .7;
    box-shadow: 
      70px 0 0 0 @primaryClr,
      120px 0 0 0 @primaryClr,
      170px 0 0 0 @primaryClr,
      220px 0 0 0 @primaryClr
    ;
  }
  100% { 
    box-shadow: 
      20px 0 0 0 @primaryClr,
      70px 0 0 0 @primaryClr,
      120px 0 0 0 @primaryClr,
      170px 0 0 0 @primaryClr
    ;
  }
  
}