CODEWITHSUNDEEP
cssreactjs
Errand
Errand

Reputation: 51

css is not rendered properly

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:

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

Upvotes: 0

Views: 41

Answers (2)

free bug coding
free bug coding

Reputation: 234

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

Upvotes: 1

Ph1reman
Ph1reman

Reputation: 576

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.

Upvotes: 0

Related Questions