Animate to natural width

dabblet.css

/* 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

<div class="progress-bar">
  <div style="width: 75%">Upload is 75% complete</div>
</div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}