How to make progress bar chart using jQuery ?
Suppose you are preparing tabular data on certain data. So, a bar chart is used to represent the data in a graphical way for a better visual aide. The data can vary from age of a group of people to a certain range, marks of a student in a certain subject.
Approach: We will be creating the HTML progress bar whose initial value is 10%. We will design the progress bar in various colors and patterns. Then we will be creating the JavaScript code for the progress bar.
Implementation code:
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:
Please Login to comment...