SOURCE

console 命令行工具 X clear

                    
>
console
var bar = document.getElementById("bar")
var width = 1

function clamp(value, min, max) {
  if (value > max) return max;
  else if (value < min) return min;
  else return value
}

setInterval(function(){
  bar.style.width = width + '%'
  var increment = 10 * Math.random()
  width+=clamp(increment, 0, 90 - width)
},1000)
<div id="container"> 
  <div id="bar"></div>
</div>
#container {
  width: 300px;
  height: 50px;
  border: 1px solid blue;
}

#bar {
  height: 100%;
  width:100%;
  background-color: red;
  transition-property: width;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}