Custom Horizontal Progress Bar with Percentage in HTML CSS

This code creates a custom horizontal progress bar with a percentage indicator using HTML, CSS, and JavaScript. It visually represents progress and updates dynamically. The progress bar’s width and percentage text adjust based on the data-percentage attribute. This code is useful for visually tracking progress in web applications.

You can use this code in project management tools to display task completion. It helps users easily track progress. Additionally, it enhances user experience with a clear visual indicator.

How to Create Custom Horizontal Progress Bar with Percentage in HTML CSS

1. First, create the structure of the progress bar using HTML. Add the following code to your HTML file:

<div class="progress-container" data-percentage='70'>
  <div class="progress"></div>
  <div class="percentage">0%</div>
</div>

• progress-container: This is the main container that holds the progress bar and the percentage text.
• data-percentage: This attribute sets the initial percentage of the progress bar.
• progress: This element represents the fill of the progress bar.
• percentage: This element shows the percentage value on the progress bar.

2. Next, add the following CSS to style your progress bar:

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  min-height: 100vh;
  margin: 0;
}

.progress-container {
  box-shadow: 0 4px 5px rgb(0, 0, 0, 0.1)
}

.progress-container, .progress {
  background-color: #eee;
  border-radius: 5px;
  position: relative;
  height: 7px;
  width: 300px;
}

.progress {
  background-color: #6F39B0;
  width: 0;
  transition: width 0.4s linear;
}

.percentage {
  background-color: #6F39B0;
  border-radius: 5px;
  box-shadow: 0 4px 5px rgb(0, 0, 0, 0.2);
  color: #fff;
  font-size: 12px;
  padding: 4px;
  position: absolute;
  top: 20px;
  left: 0;
  transform: translateX(-50%);
  width: 40px;
  text-align: center;
  transition: left 0.4s linear;
}

.percentage::after {
  background-color: #6F39B0;
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  height: 10px;
  width: 10px;
  z-index: -1;
}

This CSS styles the progress bar and its container. It includes:

• A default style for all elements.
• Centering the progress bar on the page.
• Styling for the progress bar container and fill.
• Styling for the percentage text and its position.

3. Finally, use JavaScript to set the progress bar’s width and update the percentage text:

const progressContainer = document.querySelector('.progress-container');

// initial call
setPercentage();

function setPercentage() {
  const percentage = progressContainer.getAttribute('data-percentage') + '%';
  
  const progressEl = progressContainer.querySelector('.progress');
  const percentageEl = progressContainer.querySelector('.percentage');
  
  progressEl.style.width = percentage;
  percentageEl.innerText = percentage;
  percentageEl.style.left = percentage;
}

• This script selects the progress container and retrieves the data-percentage value.
• It then sets the width of the .progress element and the text and position of the .percentage element accordingly.

That’s all! hopefully, you have successfully created a horizontal progress bar with percentages on your website. If you have any questions or suggestions, feel free to comment below.