Custom preloader UI

joezeffdesign · January 14, 2021, 8:53pm

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!

h_classen · January 14, 2021, 9:22pm

joezeffdesign · January 14, 2021, 10:31pm

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?

jonathan · January 15, 2021, 2:30am

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

h_classen · January 16, 2021, 7:49am

copy &paste ¿

<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

preview:

MaxZieb · January 15, 2021, 12:01pm

@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 .

MaxZieb · January 15, 2021, 10:35pm

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)

Hypertastic · January 15, 2021, 9:14pm

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:

h_classen · January 15, 2021, 9:19pm

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.

Hypertastic · January 15, 2021, 9:41pm

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

fun.hype.zip (17.3 KB)

Patrick McLean

MaxZieb · January 15, 2021, 10:36pm

Well, if you use Hype Document Loader you need to integrate it in your project.
You didn't integrate the script itself.
If you want a Loading Indicator you must enable it in the Document inspector
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

Hypertastic · January 15, 2021, 11:12pm

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:

Hypertastic · January 17, 2021, 6:01pm

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

branislavmilic · January 17, 2021, 6:52pm

For non-coders-designers.

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

Thank you.

h_classen · January 17, 2021, 7:13pm

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

joezeffdesign · January 17, 2021, 9:30pm

Amen, brother!

(what branislav said)

jonathan · January 19, 2021, 12:26am

I like it! Simple and effective.