0

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?

Improve this question

2 Answers 2

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

3 Comments

Could you please add code snippets for that or smth?
Recent update, I have tried the way you describe it but it didn't work unfortunatly
It does work, but you need to be the one that does it. Here is an example of a box that becomes either filled or not filled depending on the value that is set in the y variable. jsfiddle.net/xk0zgLh2/1 If y is under 25, the box will remain not filled, if the y is equal to or over 25, the box is filled. Same logic can be applied on this dot.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.