Animate ellipsis using CSS3

Many people uses images to show to the user a "please wait loading" while some actions processing in the background. With CSS3, you can do it without using an actual image.

By simply using the animation and the keyframes properties we can show nice animations. For example, let's use the ellipsis animation. The idea is to show one dot at a time giving the impression of something is loading.

Now, here's the simple CSS code we need to implement to make this work.

div.demo {
  color: #432B21;
  font-size: 3em;
  margin: 1em 1em;
  text-align: left;
}
div.demo:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -moz-animation: ellipsis 2s infinite;
  -webkit-animation:  ellipsis 2s infinite;
  -o-animation:  ellipsis 2s infinite;
  animation:  ellipsis 2s infinite;
  content: "\2026"; /* ascii code for ellipsis */
}
@keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 55px;
  }
}

@-moz-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 55px;
  }
}

@-webkit-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 55px;
  }
}

@-o-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 55px;
  }
}

Oh yeah, if you are using IE this won't work. I guess it's time to upgrade to Firefox or Chrome.