Creating a Preloader and Progress Bar for Animate CC HTML5 Canvas?


I was able to translate 15 years old .swf files to Animate CC HTML5 Canvas, but no luck recreating a percent preloader.
I found some clues but no complete and simple solution.

Can you help?

I don’t know how to make a preloader in Animate CC, but wow…

1 Like

This is was I found… I think it’s the solution except I have no idea how to implement it… ie where to put the code…

First, add a progress listener to the asset preload block:

var loader = new createjs.LoadQueue(false);  
loader.addEventListener("fileload", handleFileLoad);  
loader.addEventListener("complete", handleComplete);  
loader.addEventListener("progress", handleProgress); // <-- ADD THIS CODE HERE  

Second, paste the function to handle it after the handleComplete() function:

function handleProgress(evt) {  
    document.getElementById("preloadFill").style.width = Math.round(evt.progress * 100) + "%";  

Third, paste in some kind of progress indicator. The above function is written to work with the following very simple example, consisting of some CSS (inserted anywhere in the head), and a couple of DIV layers, inserted inside the body immediately before the tag.

    #preload {  
        position: absolute;  
        background-color: #EEE;  
        top: 10px;  
        left: 10px;  
        width: 400px;  
        height: 5px;  
        border: 0;  
        padding: 0;  
    #preloadFill {  
        position: absolute;  
        background-color: #AAA;  
        height: 5px;  
        width: 0;  

<body onload="init();" style="background-color:#D4D4D4;margin:0px;">  
    <div id="preload"><div id="preloadFill"></div></div> <-- ADD THESE TAGS HERE  
    <canvas id="$CANVAS_ID" width="$WT" height="$HT" style="background-color:$BG"></canvas>  


document.getElementById(“preload”).style.visibility = “hidden”;

This hides the progress bar when the page is done loading.