CODEWITHSUNDEEP
javascriptember.js
Bhavya Bansal
Bhavya Bansal

Reputation: 257

progress bar in ember js

I am looking for a progress bar kind of add-on for my ember app. Requirement is user goes through a setup process and in the end when user clicks submit, then I have to show him the complete progress with a loading bar indicating how much work is done.

I used ember-progress-bar but the problem is animation starts from 0 all the time whenever I update the percent value. Is there anything which we can use and is easily available? I can design my own but still wanted to confirm first if there is something which can be used.

Upvotes: 0

Views: 858

Answers (2)

jelhan
jelhan

Reputation: 6338

ember-progress-bar addon is providing the functionality you are asking for. I've written an ember-twiddle showing basic functionality: https://ember-twiddle.com/f30100f8a9f8e62f130a76d145232020?openFiles=controllers.application.js%2C

I used ember-progress-bar but the problem is animation starts from 0 all the time whenever I update the percent value.

As demonstrated by the twiddle this issue must be due to your implementation. Since you didn't shared any details about that, it's hard to guess what might be wrong. Maybe your value is not a float between 0 and 1?

You could also use <progress> element. It's widely supported these days as indicated by caniuse.com. Twiddle includes a usage example for that one also.

Upvotes: 2

NullVoxPopuli
NullVoxPopuli

Reputation: 65173

Here is one way you could do it:

  • have a service that keeps track of your current step / how many total step there are.

  • Have a component inject that service so that it can render progress based on current step / total steps

  • whenever you perform an action that would move the progress bar, inject that service and adjust the current step counter

does that help?

Upvotes: 1

Related Questions