Morning everyone, or good afternoon depending on your timezone. I’ve seen several posts asking about using the preloader on something other than page load. I wrote these scripts years ago and still use them in my projects. I’m sure I could come up with a better solution, but who has time to fix what isn’t broken…haha
To use them, make sure jQuery is on your page and include the css and js files included in my zip or incorporate them into your existing css and js files.
Then call the twitchBladeAddOverlay on a start event using runJS. Use as many of the arguments as you want, but make sure you always have the first one which is the ID or Class of the element you want the overlay on. On the end event, call the twitchBladeRemoveOverlay script in runJS. It only takes one argument, the element you want to remove the overlay from. This allows you to remove from an element and leave on others should you so desire. I like flexibility. 
Here’s what it looks like when loading. The dynamic color is the orange:
TwitchBlade Loading Overlay
The files:
twitchBladeOverlay.zip (4.0 KB)
Wappler formatting issue: When adding a dynamic color in the script, Wappler will add an extra ’ right after varPrimaryColor.value that needs to be removed.
dmx-on:start="run({runJS:{function:'webAppAddOverlay',args:['body',`varPrimaryColor.value`'],outputType:'text'}})"
Have fun!
-Twitch