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

Questions
1

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");

2

Here’s what I do:

  • Break large scenes or assets into smaller assets (models, textures etc) for separate loading
  • Create 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
3

I like the Bootstrap progress bar. 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 basically doubles as a loading spinner / queue to users that things are still happening.

1 Like
4

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 ?

5

I just use the aforementioned Bootstrap animated stripes progress bar which essentially doubles as a spinner, but I’ve also used FontAwesome or other SVG spinner/throbber icons.

1 Like
6

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 :wink:

7

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

8

How do you overlay HTML elements?

9

Something like:

<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>
1 Like
10

Thank you!

11

It seems that new canvas is blocking input though.

12 
#overlay { pointer-events: none; }

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

#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.

2 Likes