@keyframes outer-pulse {
  from {
    width: 0.5em;
    height: 0.5em;
    left: -0.25em;
    top: -0.25em;
  }
  to {
    width: 0;
    height: 0;
    left: 0;
    top: 0;
  }
}
@keyframes inner-pulse {
  from {
    width: 0.125em;
    height: 0.125em;
    left: -0.0625em;
    top: -0.0625em;
  }
  to {
    width: 0.25em;
    height: 0.25em;
    left: -0.125em;
    top: -0.125em;
  }
}
.pulser {
  position: absolute;
  top: 50%;
  left: 50%;
}
.pulser .circle {
  display: block;
  position: absolute;
  border-radius: 50%;
}
.pulser .outer-circle-one {
  display: block;
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255,237,0, 0.5);
  animation: outer-pulse 1s ease-in-out alternate infinite;
}
.pulser .outer-circle-two {
  display: block;
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255,237,0, 0.5);
  animation: outer-pulse 1s ease-in-out alternate-reverse infinite;
}
.pulser .inner-circle {
  display: block;
  position: absolute;
  border-radius: 50%;
  animation: inner-pulse 0.5s linear alternate infinite;
  background-color: rgb(255,237,0);
}