Custom preloader UI

Feature Requests
#1

1. What do you want to see in Hype?

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

Thanks for considering!

2 Likes
#2
#3

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? :slight_smile:

#4

That's for the request! The preloading screen is an area that hasn't changed since v1.0 and is long overdue for improvement.

3 Likes
#5

copy &paste ¿ :wink:

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeDocumentLoader/HypeDocumentLoader.min.js"></script>

	<style>
	
	svg.tea {
  --secondary: #33406f;
}
svg.tea #teabag {
  transform-origin: top center;
  transform: rotate(3deg);
  animation: swing 2s infinite;
}
svg.tea #steamL {
  stroke-dasharray: 13;
  stroke-dashoffset: 13;
  animation: steamLarge 2s infinite;
}
svg.tea #steamR {
  stroke-dasharray: 9;
  stroke-dashoffset: 9;
  animation: steamSmall 2s infinite;
}
@-moz-keyframes swing {
  50% {
    transform: rotate(-3deg);
  }
}
@-webkit-keyframes swing {
  50% {
    transform: rotate(-3deg);
  }
}
@-o-keyframes swing {
  50% {
    transform: rotate(-3deg);
  }
}
@keyframes swing {
  50% {
    transform: rotate(-3deg);
  }
}
@-moz-keyframes steamLarge {
  0% {
    stroke-dashoffset: 13;
    opacity: 0.6;
  }
  100% {
    stroke-dashoffset: 39;
    opacity: 0;
  }
}
@-webkit-keyframes steamLarge {
  0% {
    stroke-dashoffset: 13;
    opacity: 0.6;
  }
  100% {
    stroke-dashoffset: 39;
    opacity: 0;
  }
}
@-o-keyframes steamLarge {
  0% {
    stroke-dashoffset: 13;
    opacity: 0.6;
  }
  100% {
    stroke-dashoffset: 39;
    opacity: 0;
  }
}
@keyframes steamLarge {
  0% {
    stroke-dashoffset: 13;
    opacity: 0.6;
  }
  100% {
    stroke-dashoffset: 39;
    opacity: 0;
  }
}
@-moz-keyframes steamSmall {
  10% {
    stroke-dashoffset: 9;
    opacity: 0.6;
  }
  80% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
}
@-webkit-keyframes steamSmall {
  10% {
    stroke-dashoffset: 9;
    opacity: 0.6;
  }
  80% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
}
@-o-keyframes steamSmall {
  10% {
    stroke-dashoffset: 9;
    opacity: 0.6;
  }
  80% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
}
@keyframes steamSmall {
  10% {
    stroke-dashoffset: 9;
    opacity: 0.6;
  }
  80% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 27;
    opacity: 0;
  }
}

	</style>

<script>
    //set the Hype build your using
    HypeDocumentLoader.setBuild('718');
    
    function documentData(hypeDocument, element, event){
        // create your own loading screen display (remeber
        event.data.loadingScreenFunction = function (shouldShow, mainContentContainer) {
	var loadingPageID = mainContentContainer.id + "_loading";
	var loadingDiv = document.getElementById(loadingPageID);

	if(shouldShow == true) {
		if(loadingDiv == null) {	
			loadingDiv = document.createElement("div");
			loadingDiv.id = loadingPageID;
			loadingDiv.style.cssText = "overflow:hidden;position:absolute;width:50px;top:40%;left:0;right:0;margin:auto;text-align:center;z-index:100000;";
			loadingDiv.innerHTML = "<svg class=\"tea\" width=\"37\" height=\"48\" viewBox=\"0 0 37 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M27.0819 17H3.02508C1.91076 17 1.01376 17.9059 1.0485 19.0197C1.15761 22.5177 1.49703 29.7374 2.5 34C4.07125 40.6778 7.18553 44.8868 8.44856 46.3845C8.79051 46.79 9.29799 47 9.82843 47H20.0218C20.639 47 21.2193 46.7159 21.5659 46.2052C22.6765 44.5687 25.2312 40.4282 27.5 34C28.9757 29.8188 29.084 22.4043 29.0441 18.9156C29.0319 17.8436 28.1539 17 27.0819 17Z\" stroke=\"var(--secondary)\" stroke-width=\"2\"></path><path d=\"M29 23.5C29 23.5 34.5 20.5 35.5 25.4999C36.0986 28.4926 34.2033 31.5383 32 32.8713C29.4555 34.4108 28 34 28 34\" stroke=\"var(--secondary)\" stroke-width=\"2\"></path><path id=\"teabag\" fill=\"var(--secondary)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16 25V17H14V25H12C10.3431 25 9 26.3431 9 28V34C9 35.6569 10.3431 37 12 37H18C19.6569 37 21 35.6569 21 34V28C21 26.3431 19.6569 25 18 25H16ZM11 28C11 27.4477 11.4477 27 12 27H18C18.5523 27 19 27.4477 19 28V34C19 34.5523 18.5523 35 18 35H12C11.4477 35 11 34.5523 11 34V28Z\"></path><path id=\"steamL\" d=\"M17 1C17 1 17 4.5 14 6.5C11 8.5 11 12 11 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke=\"var(--secondary)\"></path><path id=\"steamR\" d=\"M21 6C21 6 21 8.22727 19 9.5C17 10.7727 17 13 17 13\" stroke=\"var(--secondary)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>";
			mainContentContainer.appendChild(loadingDiv);
		}
 
		loadingDiv.style.display = "block";
		loadingDiv.removeAttribute("aria-hidden");
		mainContentContainer.setAttribute("aria-busy", true);
	} else {
		//loadingDiv.style.display = "none";
		loadingDiv.setAttribute("aria-hidden", true);
		mainContentContainer.removeAttribute("aria-busy");
	}
}
        // return to apply
        return event.data;
    }
    
    if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array();}
    window.HYPE_eventListeners.push({"type":"HypeDocumentData", "callback":documentData});
</script>

/////////////

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 :wink:

preview:

1 Like
#6

@hans great :+1:t4:
Plus like with the Hype Template Genie :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 :slight_smile:.

#7

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.

icon

Hype Preloader Genie.zip (89,8 KB)

Pre-loader help
#8

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.

Patrick McLean (o:

#9

just copy and paste everything in the headsection

and

insert your correct hypebuildt in the code above, uncomment this line: //loadingDiv.style.display = "none"; to disable the display when loading is done.

#10

Unfortunately, my version isn't realizing its true potential. (o:

fun.hype.zip (17.3 KB)

Patrick McLean

#11
  1. Well, if you use Hype Document Loader you need to integrate it in your project.
    You didn't integrate the script itself.
  2. If you want a Loading Indicator you must enable it in the Document inspector
  3. You need something to load in your file set to preload. I added a 2,8 MB file from Unsplash

fun_mz1.hype.zip (2,7 MB)

The alternative would be to use Hype Preloader Genie

#12

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:

#13

Thank you @h_classen and @MaxZieb. I now see how the pre-loader works. I'll play around with it now to see what other ideas can be explored.

Huge Fan! Patrick McLean

#14

For non-coders-designers.

  1. We create an animated GIF in Photoshop.
  2. 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.
  3. There's no step 3. That's it.

Thank you.

1 Like
#15

good catch :slight_smile: :+1: ... from my reading it would only apply usings *.oam-embed ¿!

#16

Amen, brother! :slight_smile:

(what branislav said)

1 Like
#17

I like it! Simple and effective.

#18

Hey max, How does this work?

#19

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.

1 Like
#20

Very neat,

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