Wait dots

Waiting animation

by jessekinsman

HTML

<div class="wait">
  <span class="dot one"></span>
  <span class="dot two"></span>
  <span class="dot three"></span>
</div>

CSS

.wait {
  overflow: hidden;
  display: block;
  padding: 1.25em;
}
.wait .dot {
  width: 1em;
  height: 1em;
  border-radius: 1em;
  background-color: grey;
  display: inline-block;
  margin: .1em;
  opacity: 1;
}
.wait .dot.one {
  animation: pulse 1s infinite ease-in-out; 
}
.wait .dot.two {
  animation: pulse 1s infinite ease-in-out;
  animation-delay: .25s
}
.wait .dot.three{
  animation: pulse 1s infinite ease-in-out;
  animation-delay: .5s
}
@keyframes pulse {
    0% { transform: scale(1);}
    50% { transform: scale(1.35); opacity: .5}
    100% { transform: scale(1);}
}