public
Created — forked from chriscoyier/dabblet.css

Animate to natural width

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
/* Animate to natural width */
 
body { background: black; padding: 100px; margin: 0; font-family: sans-serif; }
 
.progress-bar {
border: 2px solid red;
border-radius: 4px;
 
}
.progress-bar > div {
color: white;
background: red;
overflow: hidden;
white-space: nowrap;
padding: 10px 20px;
border-radius: 1px;
animation: progress-bar 2s;
 
}
 
@keyframes progress-bar {
0% { width: 0; }
}
dabblet.html
HTML
1 2 3 4 5 6 7 8
 
 
 
 
 
<div class="progress-bar">
<div style="width: 75%">Upload is 75% complete</div>
</div>
settings.json
JSON
1
{"view":"split-vertical","prefixfree":"1","page":"css"}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.