Animate to natural width

dabblet.css

/* Animate to natural width */

body,html { width:100%;height:100%; background: #111; padding: 33px 0; margin: 0; }
progress {
  box-shadow: 0 0 3px 1px white, inset 1px 1px 1px 3px rgba(111,111,111,.33);
  border: 3px double #fff;
  border-radius: 11px;
  color: white; 
  background: green;
  overflow: hidden;
  white-space: nowrap; 
  padding: 10px 20px;
  border-radius: 10px;
  animation: progress-bar 3s;
  width:88%;
}
span:after {
clear:both;
color:red;
content:"88%"
}
@keyframes progress-bar {
   0% { width: 0; }
}




/*



:before,:after{
	  clear:both
}
progress {
	  margin-top:50%;
	  overflow:hidden;
	  white-space: nowrap;
	  width:100%;
	  animation:progress 2s
}
@keyframes progress {
	  0%{width:0}
}
 





*/

dabblet.html

<progress value=88></progress>
<span>

settings.json

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