# Solution for showing a progress bar or other UX to know when a file has been downloaded

**URL:** <https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581>\
**Category:** Questions\
**Created:** [November 11, 2020, 1:03am UTC](https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581 "2020-11-11T01:03:20Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![i73](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/i73/32/3167_2.png) [@i73](https://forum.babylonjs.com/u/i73)\
**Post date:** [November 11, 2020, 1:03am UTC](https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581/1 "2020-11-11T01:03:20Z")

</div>

I’m loading a pretty heavy file 10mb and sometimes it hangs for a min, just looking at options for displaying to the user that it’s downloading.  
`var object = loader.addMeshTask("object", "", "myLinkOnline", "obj.obj");`

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [November 11, 2020, 2:24am UTC](https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581/2 "2020-11-11T02:24:02Z")

</div>

Here’s what I do:

- Break large scenes or assets into smaller assets (models, textures etc) for separate loading
- Create a [custom loading screen](https://doc.babylonjs.com/how_to/creating_a_custom_loading_screen) with progress bar and/or verbose output (e.g. “Loaded x of y assets”)
- Use `AssetsManager.onProgress()` to update progress bar
- Optionally also use a loading spinner/throbber so people don’t think it’s stalled when large assets are still to load (although I’ve never found this necessary if assets are broken up into smaller files)
- `AssetsManager.onFinish()` assemble scene, assign textures to meshes if necessary then fade out loading screen

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [November 11, 2020, 2:33am UTC](https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581/3 "2020-11-11T02:33:02Z")

</div>

I like the [Bootstrap progress bar](https://v5.getbootstrap.com/docs/5.0/components/progress/). All you need to do is update the width attribute and optionally the value (innerHTML) with your percentage loaded from your AssetsManager.

The [animated stripes variant](https://v5.getbootstrap.com/docs/5.0/components/progress/#animated-stripes) basically doubles as a loading spinner / queue to users that things are still happening.

---

<div class="post-metadata">

**Author:** ![i73](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/i73/32/3167_2.png) [@i73](https://forum.babylonjs.com/u/i73)\
**Post date:** [November 11, 2020, 2:43am UTC](https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581/4 "2020-11-11T02:43:11Z")

</div>

I would agree with you that I should break it down, but there’s only a single asset. What would you suggest for a spinner? @inteja ?

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [November 11, 2020, 2:45am UTC](https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581/5 "2020-11-11T02:45:54Z")

</div>

I just use the aforementioned [Bootstrap animated stripes progress bar](https://v5.getbootstrap.com/docs/5.0/components/progress/#animated-stripes) which essentially doubles as a spinner, but I’ve also used [FontAwesome or other SVG spinner/throbber icons](https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons).

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [November 11, 2020, 2:54am UTC](https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581/6 "2020-11-11T02:54:07Z")

</div>

LOL if you’re loading a single large asset you could fake a progress bar - advance the bar at semi-random intervals. If it finishes early no one will complain, and if the last step takes a little longer then at least users see some progress and will be none the wiser that it’s fake anyway!

After all … operating systems and software installers have been giving us wildly inaccurate progress bars and “time remaining” estimates for decades 😉

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [November 11, 2020, 2:56am UTC](https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581/7 "2020-11-11T02:56:59Z")

</div>

I think there are also file upload scripts that can report load progress on individual files but I’ve never used them myself.

---

<div class="post-metadata">

**Author:** ![i73](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/i73/32/3167_2.png) [@i73](https://forum.babylonjs.com/u/i73)\
**Post date:** [November 11, 2020, 3:23am UTC](https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581/8 "2020-11-11T03:23:59Z")

</div>

> [@inteja](#):
>
> I just use the aforementioned [Bootstrap animated stripes progress bar](https://v5.getbootstrap.com/docs/5.0/components/progress/#animated-stripes) which essentially doubles as a spinner, but I’ve also used [FontAwesome or other SVG spinner/throbber icons](https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons).

How do you overlay HTML elements?

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [November 11, 2020, 3:30am UTC](https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581/9 "2020-11-11T03:30:10Z")

</div>

Something like:

```auto
<canvas id="render-canvas"></canvas>

<div id="overlay" style="position:absolute; width:100%; height:100%; top:0; left:0; z-index:1000">My overlay content</div>

```

---

<div class="post-metadata">

**Author:** ![i73](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/i73/32/3167_2.png) [@i73](https://forum.babylonjs.com/u/i73)\
**Post date:** [November 11, 2020, 4:23am UTC](https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581/10 "2020-11-11T04:23:04Z")

</div>

> [@inteja](#):
>
> ```auto
> <canvas id="render-canvas"></canvas>
> 
> <div id="overlay" style="position:absolute; width:100%; height:100%; top:0; left:0; z-index:1000">My overlay content</div>
> 
> ```

Thank you!

---

<div class="post-metadata">

**Author:** ![i73](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/i73/32/3167_2.png) [@i73](https://forum.babylonjs.com/u/i73)\
**Post date:** [November 11, 2020, 4:26am UTC](https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581/11 "2020-11-11T04:26:54Z")

</div>

It seems that new canvas is blocking input though.

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [November 11, 2020, 4:31am UTC](https://forum.babylonjs.com/t/solution-for-showing-a-progress-bar-or-other-ux-to-know-when-a-file-has-been-downloaded/15581/12 "2020-11-11T04:31:17Z")

</div>

```auto
#overlay { pointer-events: none; }

```

But if you have HTML elements like buttons inside the div, then you need an additional:

```auto
#overlay > * { pointer-events: auto; }

```

Your needs may vary.

If you’re just using the overlay for a loading screen the best thing to do is turn it off completely with `display:none;` when loading is complete.