How to make progress bar chart using jQuery? Last Updated : 19 Jun, 2024 Comments Improve Suggest changes Like Article Like Report Creating a progress bar chart using jQuery can significantly enhance the visual representation of your data. Whether you are showcasing the age distribution of a group of people or the marks of students in various subjects, a progress bar chart offers an intuitive and visually appealing way to present your information. ApproachThe HTML includes an input field for numbers between 1 and 100, a container div with class "bar", which contains the progress bar div with class "progress" and a div for displaying the percentage with class "percentage".The .bar class styles a container with a width of 500px, height of 80px, aquamarine background, and rounded corners. The .progress class styles the progress indicator with a width of 50px, height of 50px, grey background, and rounded corners.The .percentage class positions and styles the percentage text, displaying it boldly and positioned absolutely within the progress bar.An onchange event on the input field updates the percentComplete variable, adjusts the width of the progress bar proportionally to the input value, and updates the text in the .percentage div.When the input value changes, the progress bar's width is recalculated and updated to reflect the input percentage, and the percentage text is updated to show the new value.Example: In the example below, we will create the HTML progress bar whose initial value is 10%. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .bar { width: 500px; height: 80px; background-color: aquamarine; border-radius: 100px; display: flex; align-items: center; } .progress { width: 467px; width: 50px; height: 50px; background-color: grey; border-radius: 100px; margin-left: 17px; } .percentage { position: absolute; margin-left: 30px; font-weight: bold; } input { margin-bottom: 30px; } </style> </head> <body> <h3> Enter a number between 1 and 100 for progress </h3> <input type="number" min="0" max="100"> <div class="bar"> <div class="progress"> </div> <div class="percentage">0%</div> </div> <script> const input = document.querySelector('input'); const progress = document.querySelector('.progress'); const percentage = document.querySelector('.percentage'); console.log(progress) let percentComplete = 0; input.onchange = function () { percentComplete = input.value console.log(percentComplete); progress.style.width = `${percentComplete / 100 * 417 + 50}px`; percentage.innerHTML = `${percentComplete}%`; }; </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to make progress bar chart using jQuery? N neeraj kumar 13 Follow Improve Article Tags : Technical Scripter Web Technologies HTML CSS JQuery Technical Scripter 2020 CSS-Misc HTML-Misc jQuery-Misc HTML-Questions CSS-Questions jQuery-Questions +8 More Similar Reads How to Create a Progress Bar using HTML? To create the progress bar of a task by using a <progress> tag. It is used to represent the progress of a task. It is also defined as how much work is done and how much is left. It is not used to represent the disk space or relevant query. Syntax:<progress attributes...> </progress 2 min read How to create a progress bar using HTML and CSS? The progress bar is an important element in the web, the progress bar can be used for downloading, marks obtained, skill measuring unit, etc. To create a progress bar we can use HTML and CSS. To make that progress bar responsive you will need JavaScript.In this article, we will learn to create progr 1 min read How to create circular progress bar using SVG ? In this article, we will learn how to create a circular progress bar using SVG. Let us begin with the HTML part. In the SVG circle, the cx and cy attributes define the x and y coordinates of the circle. If cx and cy are not taken to the circle's center, it is set to (0,0). The r attribute defines th 3 min read How to create a progress bar using bootstrap ? Bootstrap is an open-source framework used to design responsive websites which are easy and efficient to use. It has ready-made templates which can be used to design web pages in a limited time.What is a progress bar?A progress bar is used whenever there is a need for a visual interface to show prog 4 min read How to create multi step progress bar using Bootstrap ? In this article, we will create a multi-step progress bar using Bootstrap. In addition to Bootstrap, we will use jQuery for DOM manipulation. Progress bars are used to visualize the quantity of work that's been completed. The strength of the progress bar indicates the progress of the work. It is gen 4 min read Like