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; }
}

```
Try adding the following to your style:

```
#ellipses{
 position:absolute;
}

```