One suggestion is to create progress bars with Javascript and show the bars according to progress, proportional to the maximum steps, no use of libraries or jQuery, with pure Javascript.
The code pulls the value of the div to determine the number of steps. For example, if the div has the text 1/7, the code pulls the 7:
HTML:
<div>1/7</div>
JS:
var maximo = +prog.textContent.trim().split("/")[1]; // 7
That is, you don’t need to change anything in CSS or code, because the value of the steps is automatically captured according to the text in the div.
As the button Next is clicked, increasing the steps and showing proportionally the progress bars.
I will leave 3 examples with different values:
Example with 7 steps:
document.addEventListener("DOMContentLoaded", function(){
const p_ = document.getElementById("progresso");
var b_ = '';
for(let x=0; x < 360; x++){
b_ += '<span style="transform: rotate('+x+'deg);"></span>';
}
p_.innerHTML += b_;
var prog = document.querySelector("#progresso div");
var maximo = +prog.textContent.trim().split("/")[1];
var atual = 1;
var bar_step = Math.floor(360/maximo);
var bars = document.querySelectorAll("#progresso span");
function passos(atual){
var limit = atual == maximo ? bars.length : atual*bar_step;
prog.innerHTML = atual + "/" + maximo;
for(let b = 0; b < limit; b++){
bars[b].style.display = "inline-block";
}
}
passos(atual);
document.getElementById("next").onclick = function(){
if(atual < maximo){
atual++;
passos(atual);
}
}
});
#progresso, #progresso div{
width: 100px;
height: 100px;
border: 2px solid #000;
border-radius: 50%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#progresso div{
position: absolute;
width: 60%;
height: 60%;
z-index: 1;
}
#progresso span{
display: inline-block;
width: 2px;
height: 50%;
background: red;
position: absolute;
left: 50%;
margin-left: -1px;
top: 0;
transform-origin: bottom;
display: none;
}
<div id="progresso">
<div>1/7</div>
</div>
<br>
<button id="next">Próximo</button>
Example with 3 steps:
document.addEventListener("DOMContentLoaded", function(){
const p_ = document.getElementById("progresso");
var b_ = '';
for(let x=0; x < 360; x++){
b_ += '<span style="transform: rotate('+x+'deg);"></span>';
}
p_.innerHTML += b_;
var prog = document.querySelector("#progresso div");
var maximo = +prog.textContent.trim().split("/")[1];
var atual = 1;
var bar_step = Math.floor(360/maximo);
var bars = document.querySelectorAll("#progresso span");
function passos(atual){
var limit = atual == maximo ? bars.length : atual*bar_step;
prog.innerHTML = atual + "/" + maximo;
for(let b = 0; b < limit; b++){
bars[b].style.display = "inline-block";
}
}
passos(atual);
document.getElementById("next").onclick = function(){
if(atual < maximo){
atual++;
passos(atual);
}
}
});
#progresso, #progresso div{
width: 100px;
height: 100px;
border: 2px solid #000;
border-radius: 50%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#progresso div{
position: absolute;
width: 60%;
height: 60%;
z-index: 1;
}
#progresso span{
display: inline-block;
width: 2px;
height: 50%;
background: red;
position: absolute;
left: 50%;
margin-left: -1px;
top: 0;
transform-origin: bottom;
display: none;
}
<div id="progresso">
<div>1/3</div>
</div>
<br>
<button id="next">Próximo</button>
Example with 5 steps:
document.addEventListener("DOMContentLoaded", function(){
const p_ = document.getElementById("progresso");
var b_ = '';
for(let x=0; x < 360; x++){
b_ += '<span style="transform: rotate('+x+'deg);"></span>';
}
p_.innerHTML += b_;
var prog = document.querySelector("#progresso div");
var maximo = +prog.textContent.trim().split("/")[1];
var atual = 1;
var bar_step = Math.floor(360/maximo);
var bars = document.querySelectorAll("#progresso span");
function passos(atual){
var limit = atual == maximo ? bars.length : atual*bar_step;
prog.innerHTML = atual + "/" + maximo;
for(let b = 0; b < limit; b++){
bars[b].style.display = "inline-block";
}
}
passos(atual);
document.getElementById("next").onclick = function(){
if(atual < maximo){
atual++;
passos(atual);
}
}
});
#progresso, #progresso div{
width: 100px;
height: 100px;
border: 2px solid #000;
border-radius: 50%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
#progresso div{
position: absolute;
width: 60%;
height: 60%;
z-index: 1;
}
#progresso span{
display: inline-block;
width: 2px;
height: 50%;
background: red;
position: absolute;
left: 50%;
margin-left: -1px;
top: 0;
transform-origin: bottom;
display: none;
}
<div id="progresso">
<div>1/5</div>
</div>
<br>
<button id="next">Próximo</button>
Hugo, I really liked the way you exemplified, sometimes the total activities can change, but it’s easy to change that, congratulations !
– David
@David was worth my dear! the advantage is that it has virtually nothing code compared to plugins and other libraries, so it is easier for you to keep track of what you have in your project etc... And yes, it’s very easy to edit etc, just as in JS in CSS you can create as many --var as you want and use where the number of tasks is different. [] s
– hugocsl