Loading dot dot dot

dabblet.css

/*
   Loading dot dot dot
*/

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

dabblet.html

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

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}