Is there anyway to animate an ellipsis with CSS animations?

Question

I\'m trying to have an ellipsis animate, and was wondering if it was possible with CSS animations...

So it might be like

Loading...
Loading..
Loading.
Lo         


        

Answer 1

How about a slightly modified version of @xec's answer: http://codepen.io/thetallweeks/pen/yybGra

HTML

A single class added to the element:

Loading

CSS

Animation that uses steps. See MDN docs

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 20px;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 20px;    
  }
}

@xec's answer has more of a slide-in effect on the dots, while this allows the dots to appear instantly.