Initializing progress inside a hidden div leads empty progress bar

[ceremcem]

If you initialize progress bar inside a hidden div causes progress bar not to render.

Workaround

Re-rendering (removing from DOM and restoring it back) solves the problem.

TODO

Add a jsFiddle link

[cculbreath]

I'm having trouble with this too. I'd like the loading bar to render in an initially-hidden pop up modal. Rendering after the modal pops up results in terrible performance.

[ahmed4e]

i have the same problem here

[zbryikt]

looks like the progress bar is actually rendered but with wrong dimension( width and height ). there is a function "fit" which should be able to use to resize the bar container, but somehow it didn't update the container.

I'll try to add two patches:

1. fix "fit" function so we can update dimension when needed.
2. add support of 100% in dimension so the size of bar automatically fit the size of its container.

[zbryikt]

reference: b190750bb726cdafdc603fa87e53ffb36a27ff74 and dd66ae2373f6df570678adae8f9fbf456d2ed447

I added some options to solve this and related issues:

data-bbox

I used getBBox to calculate the progress bar's dimension, which is not available when element is hidden. so I update all presets to add a default bbox, and add the "data-bbox" option for users who customize their own progress bar.

If you use presets, you won't have to worry about this since I've added a bbox config for each preset.

data-set-dim

I've fixed the fit function to always update dimension if it's not set from user, so calling bar.fit() should work now, Then I found - if user set the width/height with external css, it won't work because the fit function overwrite it. set data-set-dim="false" can disable fit function from modify the container's dimension.

---

I'll add these options in the document later.