Various tweaks ideas for animated progress bar document body style height 100pt function createProgressBar let div document createElement div div className progress document body appendChild div div style width 50 div style background color white div style margin 10px div style border radius 5px div style overflow hidden let prog document createElement div div appendChild prog prog style width 1 prog style background color blue prog style height 10px prog width 1 var id setInterval frame 10 function frame let divs document getElementsByClassName progress for let k 0 k divs length k divs k children 0 width 0 05 let width divs k children 0 width if width 100 divs k parentNode removeChild divs k else divs k children 0 style width width end frame createProgressBar let button document createElement button document body appendChild button button innerHTML Create Progress Countdown button onclick createProgressBar console log ready version that uses a heatmap color transition function document body style height 100pt function createProgressBar let div document createElement div div className progress document body appendChild div div style width 50 div style background color white div style margin 10px div style border radius 5px div style overflow hidden let prog document createElement div div appendChild prog prog style width 1 prog style background color blue prog style height 10px prog width 1 function heatMapColorforValue value value 0 to 1 0 var h 1 0 value 240 return hsl h 100 50 var id setInterval frame 10 function frame let divs document getElementsByClassName progress for let k 0 k divs length k divs k children 0 width 0 05 let width divs k children 0 width if width 100 divs k parentNode removeChild divs k else divs k children 0 style background color heatMapColorforValue width 100 divs k children 0 style width width end frame createProgressBar let button document createElement button document body appendChild button button innerHTML Create Progress Countdown button onclick createProgressBar console log ready add sub scroll detail underline document body style height 100pt function createProgressBar let div document createElement div div className progress document body appendChild div div style width 50 div style background color white div style margin 10px div style border radius 5px let prog document createElement div div appendChild prog prog style width 1 prog style background color blue prog style height 10px prog style border radius 5px prog width 1 prog style box shadow 1px 0px 5px 5px rgba 255 0 0 0 2 let line document createElement div div appendChild line line style width 1 line style background color black line style height 1px function heatMapColorforValue value value 0 to 1 0 var h 1 0 value 240 return hsl h 100 50 var id setInterval frame 10 function frame let divs document getElementsByClassName progress for let k 0 k divs length k divs k children 0 width 0 05 let width divs k children 0 width if width 100 divs k parentNode removeChild divs k else divs k style background color heatMapColorforValue 1 width 100 divs k children 0 style width width divs k children 1 style width width 10 100 end frame createProgressBar let button document createElement button document body appendChild button button innerHTML Create Progress Countdown button onclick createProgressBar console log ready add sub scroll detail underline document body style height 100pt function createProgressBar let div document createElement div div className progress document body appendChild div div style width 50 div style background color white div style margin 10px div style border radius 5px div style overflow hidden div style position relative let prog document createElement div div appendChild prog prog style width 1 prog style background color blue prog style height 10px prog width 1 let line document createElement div div appendChild line line style width 1 line style background color black line style height 1px let txt document createElement div div appendChild txt txt innerHTML txt style position absolute txt style right 2px txt style top 0 txt style font size 10px txt style display flex txt style justify content center txt style align items center function heatMapColorforValue value value 0 to 1 0 var h 1 0 value 240 return hsl h 100 50 var id setInterval frame 10 function frame let divs document getElementsByClassName progress for let k 0 k divs length k divs k children 0 width 0 05 let width divs k children 0 width if width 100 divs k parentNode removeChild divs k else divs k children 0 style background color heatMapColorforValue width 100 divs k children 0 style width width divs k children 1 style width width 10 100 divs k children 2 innerHTML width toFixed 0 end frame createProgressBar let button document createElement button document body appendChild button button innerHTML Create Progress Countdown button onclick createProgressBar console log ready
5px prog width 1 prog style box shadow 1px 0px 5px 5px rgba 255 0 0 0 2 let line document createElement div div appendChild line line style width 1 line style background color black line style height 1px function heatMapColorforValue value value 0 to 1 0 var h 1 0 value 240 return hsl h 100 50 var id setInterval frame 10 function frame let divs document getElementsByClassName progress for let k 0 k divs length k divs k children 0 width 0 05 let width divs k children 0 width if width 100 divs k parentNode removeChild divs k else divs k style background color heatMapColorforValue 1 width 100 divs k children 0 style width width divs k children 1 style width width 10 100 end frame createProgressBar let button document createElement button document body appendChild button button innerHTML Create Progress Countdown button onclick createProgressBar console log ready add sub scroll detail underline document body style height 100pt function createProgressBar let div document createElement div div className progress document body appendChild div div style width 50 div style background color white div style margin 10px div style border radius 5px div style overflow hidden div style position relative let prog document createElement div div appendChild prog prog style width 1 prog style background color blue prog style height 10px prog width 1 let line document createElement div div appendChild line line style width 1 line style background color black line style height 1px let txt document createElement div div appendChild txt txt innerHTML txt style position absolute txt style right 2px txt style top 0 txt style font size 10px txt style display flex txt style justify content center txt style align items center function heatMapColorforValue value value 0 to 1 0 var h 1 0 value 240 return hsl h 100 50 var id setInterval frame 10 function frame let divs document getElementsByClassName progress for let k 0 k divs length k divs k children 0 width 0 05 let width divs k children 0 width if width 100 divs k parentNode removeChild divs k else divs k children 0 style background color heatMapColorforValue width 100 divs k children 0 style width width divs k children 1 style width width 10 100 divs k children 2 innerHTML width toFixed 0 end frame createProgressBar let button document createElement button document body appendChild button button innerHTML Create Progress Countdown button onclick createProgressBar console log ready