A single progress uses pure css to achieve animation effects

p input#rangeInput(type="range", min="0", max="100", value="50") progress#progressBar(value="50", max="100") p progress(max="100", value="10") progress(max="100", value="40") progress(max="100", value="80") progress(max="100", value="100")

progress[value], progress[value]::-webkit-progress-bar { border-radius: 10px; box-shadow: 0 0 3px inset #ccc; background-size: 400% 400%; background: url('data:image/svg+xml,'); } progress[value] { width: 200px; border: 2px solid #eee; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; height: 20px; --pbarbg: url('data:image/svg+xml,'); } progress[value]::-webkit-progress-value { box-shadow: 0 0 3px inset #999; border-radius: 10px; background: var(--pbarbg); transition: all 0.5s; } progress::-moz-progress-bar { box-shadow: 0 0 3px inset #999; border-radius: 10px; background: var(--pbarbg); transition: all 0.5s; }