Question: I'm trying to create an overlay that says: 'Waiting...', but I want the ellipses to be animated. So the text would actually go from:-

```
'Waiting' -> 'Waiting.' -> 'Waiting..' -> 'Waiting...' -> 'Waiting' ->

```

However, when the ellipses count changes it's pushing the 'Waiting' to the left since the content is centered in its container.

HTML:

```
<div style='text-align: center'>
  <span>Waiting</span>
  <span id='ellipses'></span>
</div>

```

Javascript:

```
var ellipses = 0;
setInterval(function () {
    $('#ellipses').text('.'.repeat(ellipses))
    ellipses = (ellipses + 1) % 4;
}, 400)

```

Any good way to handle this ?, Easy to do with some magic numbers or manual calculation of what `'center'` is + a fixed position, but I'd like to have a clean css solution if possible..

Answer: 
Using pure CSS, try this [Fiddle](http://jsfiddle.net/stanze/mrjjwkwo/), 

```
.ellipses1 {    
    -webkit-animation: elipses 1.3s infinite;
    -webkit-animation-delay: 0.0s;    
}

.ellipses2 {    
    -webkit-animation: elipses 1.3s infinite;
    -webkit-animation-delay: 0.2s;      
}

.ellipses3 {
    -webkit-animation: elipses 1.3s infinite;
    -webkit-animation-delay: 0.3s;     
}
@-webkit-keyframes elipses {
      0% { opacity: 0; }
     50% { opacity: 0; }
    100% { opacity: 1; }
}

```
Place the ellipsis inside an after pseudo element and declare its position as absolute. I created a fiddler to demonstrate the behavior. The ellipsis depends on your mouse pointer hovering over the second (middle) line for demonstration purpose: <http://jsfiddle.net/f9eutj40/>

HTML: 

```
<div>
    <span>
        The first line
    </span>
    </br>
    <span class="ellipsis">
        The second line
    </span>
        </br>
    <span>
        The third line
    </span>
</div>

```

CSS: 

```
div { 
    text-align: center; 
    background-color: green;
}
span {
    color: cyan;
}
span.ellipsis:hover:after {
    color: cyan;
    content: ".....";
    position: absolute;
}

```

This way you don't even have to make a modification to the text itself (and clean it up afterwards again...). You just modify the styling of the text. This is done in a static manner in the demo above using the `content:` rule, but nothing speaks against doing that dynamic.