Adding a percentage display to an animated progress bar can enhance its usability by providing visual feedback on the progress. Here is an example of how to create an animated progress bar with a percentage indicator using HTML, CSS, and JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Progress Bar with Percentage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
<div class="progress-percentage" id="progress-percentage">0%</div>
</div>
<script src="script.js"></script>
</body>
</html>
--------------------------------------
CSS (style.css)
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f0f0f0;
font-family: Arial, sans-serif;
}
.progress-container {
width: 80%;
background: #ddd;
border-radius: 20px;
overflow: hidden;
position: relative;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.progress-bar {
width: 0;
height: 30px;
background: linear-gradient(90deg, #4caf50, #8bc34a);
transition: width 2s;
}
.progress-percentage {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-weight: bold;
color: white;
height: 30px;
line-height: 30px;
transition: left 2s;
}
------------------------------------------------
JavaScript (script.js)
document.addEventListener('DOMContentLoaded', () => {
const progressBar = document.getElementById('progress-bar');
const progressPercentage = document.getElementById('progress-percentage');
let progress = 0;
const interval = setInterval(() => {
progress += 1;
progressBar.style.width = progress + '%';
progressPercentage.textContent = progress + '%';
progressPercentage.style.left = progress + '%';
if (progress >= 100) {
clearInterval(interval);
}
}, 20); // Adjust the speed of the progress here
});
--------------------------------------------------
Explanation
HTML:
- The
progress-containerserves as the background and holder for the progress bar. - The
progress-baris the animated element that fills up to indicate progress. - The
progress-percentagedisplays the current progress percentage and moves along with the progress bar.
- The
CSS:
- Styles for the
progress-container,progress-bar, andprogress-percentage. - The
progress-containeris styled to be centered with a rounded appearance and shadow. - The
progress-barhas a gradient background and smooth width transition. - The
progress-percentageis positioned absolutely inside the container and transitions to follow the progress bar's width.
- Styles for the
JavaScript:
- An event listener is added to execute the script when the DOM is fully loaded.
- A
setIntervalfunction increments theprogressvariable and updates the width of theprogress-barand the text of theprogress-percentage. - The interval clears when the progress reaches 100%.
This setup creates a visually appealing animated progress bar that fills up with a percentage indicator, providing users with clear feedback on the progress. You can adjust the interval speed and other styles to fit your specific requirements.
0 Comments