Show an Overlay with a Loading Icon plus Message

Webix JS
#1

Hello!!

I’m trying to make a loading message overlay, with a loading icon next to the message.

I had read this post: https://docs.webix.com/desktop__progress.html . But apparently, showProgress method doesn’t support a text message.

I’ve tried to do it using css and a svg icon, and I think I almost succeed: https://snippet.webix.com/us1g9e58

The only problem, is that when I use the showOverlay method with my content, for a really brief moment, the text appers in the center, and then goes to the right place.

I think the problem is something related with webix internal css, but I couldn’t figure out what.

Please, can anyone help me? Or suggest another more elegant solution?

#2

Hey @rogerzanelato,

The only problem, is that when I use the showOverlay method with my content, for a really brief moment, the text appers in the center, and then goes to the right place.

It looks like the height of the loading-container gets dynamically adjusted in the process, hence why you are seeing the following transition. You can simply set a specific height for your container: https://snippet.webix.com/1te4faa2.