Animate to natural width

dabblet.css

/* Animate to natural width */

body { background: black; padding: 100px; margin: 0; }

.progress-bar {
  border: 2px solid red;
  border-radius: 14px;
  overflow: hidden;
}
.progress-bar > div {
  color: white; 
  background: red;
  white-space: nowrap; 
  padding: 10px 20px;
  box-sizing: border-box;
  animation: progress-bar 2s;
}

@keyframes progress-bar {
   0% { width: 0; }
}

dabblet.html

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

settings.json

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