The progress bar is a part of the web, the progress bar can be used for different categories such as marks obtained, skill mapping unit, etc. To create animated progress bar we can use HTML and CSS. To make that progress bar responsive we need JavaScript.
In this article, we will learn to create progress bars using HTML and CSS. A progress bar is designed by using two HTML “div”, the container with the class “softprogress“, as shown in the following examples.
HTML Code: We create a parent div with a class named softprogress that will set the full-length unit and the derive div will set the obtaining unit.
HTML Code:
<div class="softprogress"> <p>Progress Bar to - <strong>90%</strong></p> <div code-softprogress="90"></div> <p>Progress Bar to - <strong>65%</strong></p> <div code-softprogress="65"></div> <p>Progress Bar to - <strong>95%</strong></p> <div code-softprogress="95"></div> </div>
CSS Code:
<style type="text/css">
* {
font-family: sans-serif;
font-weight: bold;
}
/* softprogress bar CSS */
.softprogress *:not([code-softprogress]) {
margin: 5px 0;
font-size: 16px;
}
.softprogress {
width: 100%;
max-width: 500px;
padding: 15px;
box-sizing: border-box;
}
.softprogress [code-softprogress] {
height: 25px;
box-shadow: 0 0 1px 1px rgba(0, 20, 0, 0.35) inset;
border-radius: 15px;
margin: 5px 0 10px 0;
overflow: hidden;
background-color: #ddd;
}
[code-softprogress]::after {
content: "";
display: flex;
justify-content: flex-end;
align-items: center;
background: #2f8d46;
width: 0;
height: 100%;
box-sizing: border-box;
font-size: 16px;
color: #fff;
border-radius: 15px;
padding: 0 3px;
transition: 2s;
}
[code-softprogress].run-softprogress::after {
content: attr(code-softprogress) "%";
width: var(--run-softprogress);
}
/* End softprogress bar CSS */
</style>JavaScript Code:
<script type="text/javascript">
window.onload = function () {
if (
document.querySelectorAll(".softprogress").length > 0 &&
document.querySelectorAll(".softprogress [code-softprogress]").length > 0
) {
document
.querySelectorAll(".softprogress [code-softprogress]")
.forEach((x) => runsoftprogress(x));
}};
function runsoftprogress(el) {
el.className = "run-softprogress";
el.setAttribute(
"style",
`--run-softprogress:${el.getAttribute("code-softprogress")}%;`
);}
</script>Conclusion:
Here we build a professional and responsive progress bar with the help of html, css and Javascript.
Would like to be able to have a CSS to assign different colors to the progress bar.
I’m a novice, I see where to change the color, however, how can I do something like this:
.soft-progress-blue span {
background-color: blue;
}
.soft-progress-green span {
background-color: green;
}
.soft-progress-purple span {
background-color: indigo;
}
.soft-progress-red span {
background-color: red;
}
You can change color by using the HEX/RGB color code or color name. background-color: Here you can add different colors. Feel free to ask if you need further assistance.
First of all, thank you for the quick reply!
Yes, I have determined that I can change the color in that line of code. However, that changes all bars at the same time. I would like to have a set of bars in green and a different color for a separate collection of bars. Hence I’d like to create a CSS that allows me to assign the bar color to a selection of bars.
Thought I already replied so if this is a duplicate, my apologies.
I first like to thank you for your quick reply.
That obviously works. But it changes all bars. Anyway, I can change individual bar colors to different colors for a different set of bars?
Please read this article I hope it will help you. Build Animated Progress Bar using HTML