Loading dot dot dot in CSS

gistfile1.css

body {
  padding: 100px;
  font-size: 62.5%;
}

.loading {
   font: 16px Monaco; /* no fallback cuz spacing would probably be off... */
   width: 6.1em; /* Was hoping 1 char = 1 em but didn't work out quite */
   overflow: hidden;
   animation: dotdotdot linear 1s infinite;
}

@keyframes dotdotdot {
  0% { width: 4.5em; }
  75% { width: 6.1em; }
}