How to create a loading JS object?
samiwistler January 5th, 2015

Hi there again,

Maybe a dumb question, by i could not find the answer just yet :)

I am trying to create a loading scene by using CSS and js loading i got : 

var cl = new CanvasLoader('canvasloader-container');cl.setShape('spiral'); // default is 'oval'cl.setDiameter(132); // default is 40cl.setDensity(10); // default is 40cl.setRange(1.4); // default is 1.3cl.setSpeed(1); // default is 2cl.setFPS(33); // default is 24cl.show(); // Hidden by default// This bit is only for positioning - not necessaryvar loaderObj = document.getElementById("canvasLoader");loaderObj.style.position = "absolute";loaderObj.style["top"] = cl.getDiameter() * -0.5 + "px";loaderObj.style["left"] = cl.getDiameter() * -0.5 + "px";

Is there a way to create a loading function with this piece of code?

 

All 3 Comments
foxcode January 6th, 2015

Hi samiwistler

 

I saw your other post on this and the answer Gio gave does seem to be what you want.

I may be misunderstanding you so please correct me if I am wrong, but I definitely think you want to make use of the 2 functions below

 

wade.loadScene(fileName, loadingBar, callback, clearScene)

 

wade.preloadScene(fileName, loadingBar, callback, clearScene)

Gio January 6th, 2015

Hi

 

Just to elaborate: you can do it in the way you are describing in your post too... I wouldn't do it that way, but it is possible. However the code that you posted above is not complete so I can't tell you why it doesn't work (if it doesn't work). It may be because the canvasloader-container element is not visible on the screen?

 

The reason I wouldn't do it with an external library is that you could do the same thing just using WADE :) Though I understand that there are no readily available examples to do that, and to replicate that effect you would need to know about custom draw functions and vector graphics, so it is a valid option to do it that way. Just make sure that the DOM elements required by that library are visible and appear in the right place on the screen.

 

If you want you can create a project on Share & Fork with the code you're trying to use, and we'll have a look when time permits.

samiwistler January 7th, 2015

Thank all, you helped me a lot.

I managed to work it with wade.loadScene... 

I will send to Share & Fork the output when finished.

 

Best of luck to all

Post a reply
Add Attachment
Submit Reply
Login to Reply