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. Loading... Loading.. 

And basically just continue like that. Any ideas?

Edit: like this: http://playground.magicrising.de/demo/ellipsis.html

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:

<div class="loading">Loading</div> 

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.