Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE HTML> <html> <head> <title>Title of the Document</title> <style> progress { width: 30%; } </style> </head> <body> <!--animation script--> <script> function animate({ timing, draw, duration }) { let start = performance.now(); requestAnimationFrame(function animate(time) { let fractionOfTime = (time - start) / duration; if(fractionOfTime > 1) { fractionOfTime = 1; } let progress = timing(fractionOfTime); draw(progress); if(fractionOfTime < 1) { requestAnimationFrame(animate); } }); } </script> <progress id="elem"></progress> <script> elem.onclick = function() { animate({ duration: 500, timing: function(fractionOfTime) { return fractionOfTime; }, draw: function(progress) { elem.style.width = progress * 100 + '%'; } }); }; </script> </body> </html>