This Bootstrap 5 code snippet helps you to create an animated progress bar with a percentage display. It smoothly animates the progress bar from 0% to 100% over 1.5 seconds. Additionally, it reveals the percentage text with a fade-in effect after a short delay. This feature is useful for visually representing progress in various applications.
How to Create Bootstrap 5 Animated Progress Bar With Percentage
1. First, we need to include the Bootstrap 5 CSS file in our HTML document. Add the following link in the <head> section of your HTML file:
<!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
2. Next, we will create the HTML structure for our progress bar. Copy and paste the following code into the <body> section of your HTML file:
<div style="width: 400px; margin: 50px auto">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 60%">
<span class="title">60%</span>
</div>
</div>
</div>
You can customize the progress percentage by changing the aria-valuenow attribute and the max-width style of the .progress-bar div.
3. To animate the progress bar and the percentage text, we need to add some CSS. Add the following CSS code in a <style> tag within the <head> section of your HTML file or in a separate CSS file:
.progress-bar {
width: 0;
-webkit-animation: progress 1.5s ease-in-out forwards;
animation: progress 1.5s ease-in-out forwards;
}
.progress-bar .title {
opacity: 0;
-webkit-animation: show 0.35s forwards ease-in-out 0.5s;
animation: show 0.35s forwards ease-in-out 0.5s;
}
@-webkit-keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}
@-webkit-keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
This CSS code defines the animations for the progress bar and the percentage text. The progress animation increases the width of the progress bar from 0 to 100%. The show animation makes the percentage text fade in.
That’s all! hopefully, you have successfully created an animated progress bar with percentages on your website. If you have any questions or suggestions, feel free to comment below.
