Creating Progress Bar using JavaScript Last Updated : 27 Jun, 2024 Comments Improve Suggest changes Like Article Like Report A Progress Bar is used to depict the progress of any task which is being carried out. Progress Bars are generally used to show the download and upload status. In other words, we can say that Progress Bars can be used to depict the status of anything that is in progress. There are several approaches to creating a progress bar using JavaScript.Table of ContentUpdating the Width of an HTML ElementUsing HTML5 progress ElementUsing JavaScriptUpdating the Width of an HTML ElementIt Update the width of a <div> element dynamically to represent progress.Example: To demonstrate creating a progress bar by updating the width of an HTML element. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Progress Bar Example - Approach 3</title> <style> .progress-bar { width: 100%; background-color: #f0f0f0; height: 30px; margin-bottom: 10px; } .progress { width: 0%; height: 100%; background-color: #4caf50; transition: width 0.3s ease; } </style> </head> <body> <h2>Progress Bar - Approach 3</h2> <div class="progress-bar"> <div id="progress" class="progress"></div> </div> <button onclick="increaseProgress()">Increase Progress</button> <button onclick="resetProgress()">Reset</button> <script> const progressBar = document .getElementById('progress'); let currentProgress = 0; function increaseProgress() { if (currentProgress < 100) { currentProgress += 10; progressBar .style .width = currentProgress + '%'; } } function resetProgress() { currentProgress = 0; progressBar.style.width = '0%'; } </script> </body> </html> Output:OutputUsing HTML5 progress ElementOne can use the <progress> element in HTML5 to represent progress in the progress bar. Which has built-in support for displaying and updating progress.Example: To demonstrate creating progress bar using HTML5 <progress> element. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Progress Bar Example - Approach 2</title> </head> <body> <h2>Progress Bar - Approach 2</h2> <progress id="progress" value="0" max="100"></progress> <button onclick="increaseProgress()">Increase Progress</button> <button onclick="resetProgress()">Reset</button> <script> const progressElement = document .getElementById("progress"); function increaseProgress() { if (progressElement.value < 100) { progressElement.value += 10; } } function resetProgress() { progressElement.value = 0; } </script> </body> </html> Output:OutputUsing JavaScriptOne can customize the JavaScript to update a visual representation of progress. Example: To demonstrate creating progress bar using JavaScript. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Progress Bar Example</title> <style> .progress-bar { width: 500px; background-color: #f0f0f0; height: 30px; margin-bottom: 10px; border-radius: 15px; } .progress { width: 0px; height: 100%; background-color: #4caf50; transition: width 0.3s ease; } </style> </head> <body> <h2>Progress Bar</h2> <div class="progress-bar"> <div id="progress" class="progress"></div> </div> <button onclick="increaseProgress()">Increase Progress</button> <button onclick="resetProgress()">Reset</button> <script> const progressBar = document.getElementById("progress"); let currentProgress = 0; function increaseProgress() { if (currentProgress < 100) { currentProgress += 5; progressBar.style.width = currentProgress + "px"; } } function resetProgress() { currentProgress = 0; progressBar.style.width = "0px"; } </script> </body> </html> Output:Output Comment More infoAdvertise with us S Shubrodeep Banerjee Follow Improve Article Tags : Misc JavaScript Web Technologies JavaScript-Misc JavaScript-Questions +1 More Practice Tags : Misc Explore JavaScript Tutorial 8 min read JavaScript BasicsIntroduction to JavaScript 4 min read JavaScript Versions 2 min read How to Add JavaScript in HTML Document? 3 min read JavaScript Syntax 6 min read JavaScript Output 4 min read JavaScript Comments 2 min read JS Variables & DatatypesVariables and Datatypes in JavaScript 6 min read Global and Local variables in JavaScript 4 min read JavaScript Let 6 min read JavaScript const 5 min read JavaScript Var Statement 7 min read JS OperatorsJavaScript Operators 5 min read Operator precedence in JavaScript 2 min read JavaScript Arithmetic Operators 5 min read JavaScript Assignment Operators 5 min read JavaScript Comparison Operators 5 min read JavaScript Logical Operators 5 min read JavaScript Bitwise Operators 5 min read JavaScript Ternary Operator 4 min read JavaScript Comma Operator 2 min read JavaScript Unary Operators 4 min read JavaScript in and instanceof operators 3 min read JavaScript String Operators 3 min read JS StatementsJavaScript Statements 4 min read JavaScript if-else 3 min read JavaScript switch Statement 4 min read JavaScript Break Statement 2 min read JavaScript Continue Statement 1 min read JavaScript Return Statement 4 min read JS LoopsJavaScript Loops 3 min read JavaScript For Loop 4 min read JavaScript While Loop 3 min read JavaScript For In Loop 3 min read JavaScript for...of Loop 3 min read JavaScript do...while Loop 4 min read JS Perfomance & DebuggingJavaScript | Performance 4 min read Debugging in JavaScript 4 min read JavaScript Errors Throw and Try to Catch 2 min read JS ObjectObjects in Javascript 4 min read Object Oriented Programming in JavaScript 3 min read JavaScript Objects 6 min read Creating objects in JavaScript 5 min read JavaScript JSON Objects 3 min read JavaScript Object Reference 4 min read JS FunctionFunctions in JavaScript 4 min read How to write a function in JavaScript ? 4 min read JavaScript Function Call 2 min read Different ways of writing functions in JavaScript 3 min read Difference between Methods and Functions in JavaScript 3 min read Explain the Different Function States in JavaScript 3 min read JavaScript Function Complete Reference 3 min read JS ArrayJavaScript Arrays 7 min read JavaScript Array Methods 7 min read Best-Known JavaScript Array Methods 6 min read Important Array Methods of JavaScript 7 min read JavaScript Array Reference 4 min read Like