Need help on creating Html5 canvas script for loading data progress status

[aavp1020]

I have 30mb interactive animate cc published html package as below.

currently file loading took too much time and it was very on different pc's. (I am thinking because of internet downloading speed on different pc's). I want to show loading progress while loading. i had used default preloaded but its not helping me with my need.

below I comeup with an idea how it will look with the help of keyframe animation, but i want to modify with real time loading progress, as current ways showing 0 to 100 progress when refresh, even if data is already downloded.

any help will much approciated.

my code.

this.stop();
var a = this;
var dg = a.progressbar;
intial();
function intial(){
if(dg.currentFrame == 99)
{
a.progressbar.stop();
setTimeout(gotonext, 10);
}else{
dg.gotoAndStop(dg.currentFrame+1);
var prop = dg.currentFrame+1;//instead of currentframe I will need real time loading progress.
a.progressbar.txt.text = "Loading 3D object " + Math.round(prop * 1) + "%";
setTimeout(loopprogress, 150);// just wanted to delay the process for 38sec as current html package taking 38sec to complete loading. but regardless the time I want real time loading as data load it will show the percentage.
}
}
function loopprogress(){
setTimeout(intial, 150);
};
function gotonext(){
a.gotoAndStop(1);
}

[Nicktendo28]

try this tutorial. Shows you how to create a preloader in html5.

https://www.youtube.com/watch?v=67_DXhS3_Hc

[ClayUUID · Accepted solution]

Attempting to code a preloader inside Animate is useless, because no timeline code executes until after all preloading is already complete.

What Animate calls a "preloader" in the Canvas publish settings is NOT a preloader. It's just an animated graphic (properly called a throbber) to optionally display while the page is preloading, which it always does whether or not you've selected a "preloader". I can only assume Adobe persists in using the wrong terminology here because they like to lie to people.

To make an actual preloader, you have to manually add code to the HTML generated when you publish, or create a new Canvas publish template with the added code in it. In the generated code, there should be a line something like:

loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});

After this line, you need to add something like:

loader.addEventListener("progress", myProgressFunction);

And then you'll need a progress function, something more functional than this:

function myProgressFunction(e) {
	console.log(e.progress);
}

You can take that progress parameter and use it to display a number, a filling bar, whatever.

[aavp1020]

Thank you

[natashah93244772]

This is great and to the point. I guess that thing that has me scratching my head is why adobe just wouldn't include percentage/progress bars/charts/animations to use and customize? Why junk our lives up with a "preloader" animation.

Anyway- moving forward- I'm guessing we use the preloader div to load in our css/js progress bar that sucks the data from: console.log(e.progress); ?