Display loader animation in the canvas

GoJS
1

Hi,

I have a tree control. In order to fill the data i have to query some external web services. Sometimes they take some time in fetching the data, i want to display some loader type of animation. I tried using the older ways of loading a gif file using Jquery show and hide methods. Somehow they are not display over the canvas diagram control.

Can you please advise?

2

Make sure the DIV that is supposed to appear over the diagram is a sibling of the diagram DIV, and set its CSS z-index to something large, like 300.

There’s an example of HTML elements appearing over a Diagram in this sample: Data Visualization GoJS Sample

And in this sample: HTML Interaction

Both have their CSS z-index set as a matter of necessity (because we are setting the z-index of the Diagram DIV’s canvas to 2, so it must be greater than 2 to be shown.)

3

Hi,

thanks for your feedback. I did the changes, however i could get the css animation only when i am in debug mode in the browser. Otherwise the background of the DIAGRAM DIV is only taking priority. Please note that the z index value is also set as a greater value.

I am trying show some animation during the data fetch.

Also, since the animation begins before the diagram initialization, will that be a problem?

4

It shouldn’t be a problem that an HTML+CSS or Gif animation begins before the diagram initialization, as long as all the relevant parts are siblings of the Diagram DIV and have a high z-order. I’m not sure what else might be causing issues with the Diagram DIV taking priority, but if you want to make a simple example of it I could take a look.

5

Virtualized Tree with TreeLayout now shows an example of a CSS animation that is shown during loading.