Skip to content

Instantly share code, notes, and snippets.

@chriscoyier
Created January 24, 2012 03:09
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save chriscoyier/1667557 to your computer and use it in GitHub Desktop.
Save chriscoyier/1667557 to your computer and use it in GitHub Desktop.
Animate to natural width
/* Animate to natural width */
body { background: black; padding: 100px; margin: 0; }
.progress-bar {
border: 2px solid red;
border-radius: 14px;
}
.progress-bar > div {
color: white;
background: red;
overflow: hidden;
white-space: nowrap;
padding: 10px 20px;
border-radius: 10px;
animation: progress-bar 2s;
}
@keyframes progress-bar {
0% { width: 0; }
}
<div class="progress-bar">
<div style="width: 75%">Upload is 75% complete</div>
</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