# Creating a Preloader and Progress Bar for Animate CC HTML5 Canvas?
**URL:** https://forum.kirupa.com/t/creating-a-preloader-and-progress-bar-for-animate-cc-html5-canvas/639935
**Category:** programming
**Created:** [June 14, 2019, 11:00am UTC](https://forum.kirupa.com/t/creating-a-preloader-and-progress-bar-for-animate-cc-html5-canvas/639935 "2019-06-14T11:00:31Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@foureyez](https://forum.kirupa.com/u/foureyez)
#### Post date: [June 14, 2019, 11:00am UTC](https://forum.kirupa.com/t/creating-a-preloader-and-progress-bar-for-animate-cc-html5-canvas/639935/1 "2019-06-14T11:00:31Z")
Hello,
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?
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [June 14, 2019, 12:32pm UTC](https://forum.kirupa.com/t/creating-a-preloader-and-progress-bar-for-animate-cc-html5-canvas/639935/2 "2019-06-14T12:32:14Z")
I don’t know how to make a preloader in Animate CC, but wow…
---
### Author:  [@foureyez](https://forum.kirupa.com/u/foureyez)
#### Post date: [June 14, 2019, 1:16pm UTC](https://forum.kirupa.com/t/creating-a-preloader-and-progress-bar-for-animate-cc-html5-canvas/639935/3 "2019-06-14T13:16:38Z")
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
loader.loadManifest(lib.properties.manifest);
```
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.
```
<-- ADD THESE TAGS HERE
```
---
### Author:  [@foureyez](https://forum.kirupa.com/u/foureyez)
#### Post date: [June 14, 2019, 1:17pm UTC](https://forum.kirupa.com/t/creating-a-preloader-and-progress-bar-for-animate-cc-html5-canvas/639935/4 "2019-06-14T13:17:34Z")
…and
document.getElementById(“preload”).style.visibility = “hidden”;
This hides the progress bar when the page is done loading.