Skip to content

Instantly share code, notes, and snippets.

@chriscoyier
Created January 9, 2012 03:25
Show Gist options
  • Save chriscoyier/1580862 to your computer and use it in GitHub Desktop.
Save chriscoyier/1580862 to your computer and use it in GitHub Desktop.
Loading dot dot dot
/*
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; }
}
<div class="loading">
Loading...
</div>
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment