The default loading indicator is fine, but it would be great if the Hype UI provided a simple way to either (a) replace that lozenge with a looping pinwheel GIF or (b) upload your own PNG or GIF.
3. Have you found a workaround for this problem?
I usually just use the default loading indicator. I've tried the prescribed method of creating a custom preloader, but (a) I typically use opaque backgrounds, not transparent and (b) I don't want to see the preloader after the initial load.
2. Are there examples of other apps with this feature? Or, have you seen examples of this elsewhere on the web? (Please include a URL)
Nope.
4. How high of a priority is this for you?
[ x ] Nice to Have
[ ] Important
[ ] Can't use Hype without it
Hans-Gerd, thanks so much for the quick response. I went to github, studied what was there, and have absolutely no idea what I'm looking at and what to do with it. I would pull out my hair, but I have none. What do you recommend?
todo:
insert your correct hypebuildt in the code above, uncomment this line: //loadingDiv.style.display = "none"; to disable the display when loading is done.
In case using this approach: may be substitute the developer
@hans great
Plus like with the Hype Template Genie you can just “hack” the document loader JS contained in your Hype app bundle. That would apply to all exports, would need reapplying on Hype updates but is probably the approach least favored by Tumult itself. But it’s your export .
Here is a custom preload template replacer. It is not supported by me and use at your own risk. Source is included. It requires a bit of coding knowledge to tweak the extracted loading template. Replacing the template applies globally to any exports using the "Loading Indicator". This helper creates a backup of the original and can restore it when needed.
Hi @h_classen
Can you please upload a version of your cut and pasted resultant project files. I am close to understanding how you created the coffee cup loader but still learning what script or style needs to go where.
insert your correct hypebuildt in the code above, uncomment this line: //loadingDiv.style.display = "none"; to disable the display when loading is done.
Hi Max:
Best case would be to setup an animated SVG as a custom pre-loader element to run as web site loads and stop when loading is successful. Not sure why my version of what @h_classen suggested isn't functioning in my file. Likely my programming errors and understanding (o: I plan to use the hype Pre-loader Genie or even the Hype Document Loader after I understand the basics better, however, I am still learning how all this fits together. (o:
In the Inspector, we import the GIF that will be used as a preloader animation. It is added in the assets the same way the poster image is added in the current version.
What do you mean… there are a multitude of solutions in this thread… the easiest being the GIF (not my hack).
I'll address mine quickly…
Hype Template Genie… patches the Hype Application and allows you to replace the included preloader in Hype. That is a global action and is reverted on every update (needs to be reapplied).
Hype Document Loader is a dynamic approach. It uses an JavaScript Proxy to intercept the Hype version in the window scope (you need to set that via code) and injects a custom loader before initializing the generated JS file with the runtime.
The GIF approach is the easiest and most sanctioned by Tumult.
How would something like this work if I would call in external images upon loading? For dynamic purposes, first load all elements showing the preloader, and then continue with playing the Hype document & timelines