I'm trying to build a progress bar component where I want to achieve a specific design for that, as you can see how I tried it in this codesandbox link:

https://codesandbox.io/s/determined-lamport-7zjvwj.

I want to achieve the following behavior:

• Initially, all dots should be blue except the first one which is rounded in blue.
• I want to keep the dots in the progress bar when I change the properties into blue if the percentage didn't cover them otherwise white

But somehow my CSS calculation is not working properly as expected which I believe I missed something, so any ideas?

CodePudding user response：

there is an error in line 60 et 61

    const current = steps.indexOf(stepStatus); // issue here probably
    const step = steps.indexOf(stepStatus); // issue here probably

should be:

    const current = steps.indexOf(progressBarStatus);
    const step = steps.indexOf(stepStatus)

In addition to this problem the width of the pourcentages is not accurate, you can fix this by changing the line 51 with:

    const progressBarCalculatedWith =
      ((current / (getIntermediarySteps   1)) * 100)   (steps.length -1 - current);

this is the result :

working progress bar

CodePudding user response：

Simply use the same calculation that calculates the % for the loading bar, then apply it ont he dots - So that if the value is 25% or more, then the first dot is blue, then an additional 25% and so on etc. It does not have to be interconnected with the rest of the loading bar, it can use the same calculation.

Simply an If / Else basically.