How to make progress bar chart using jQuery ?

Last Updated : 23 Nov, 2020

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> 