Creating a Custom Preloader

Tips & Tricks
5

When the scene has loaded, how to get rid of the custom preload div ?
thank you ~

6

You can run this function 'On Scene Load' for the first scene to remove the spinner div:

var elem = document.getElementById("spinnerarea");
elem.parentNode.removeChild(elem);
7

Hi,

This is not working for iBooks Widgets in Hype 3.0.3. It worked OK on previous versions, though.
Please confirm if this is a bug and if there is a way around it.
Thank you in advance.

8

Hi there,
This is a great addition… I have been implementing this loader in this test document (besides the loader I there are several video and animation test in the document). At first it seems to work, but than the loader stops and disappears even when the scene is not loaded yet and therefor continues to load without the spinner.

Does anyone have an idea why this is happening and how I can fix this issue.
Thank you!

9

Not certain why this is happening – can you send the whole package?

There are some files missing in the console and a JS error:

Screen Shot 2015-09-29 at 2.55.31 PM.png2666×294 181 KB

1 Like
11

@Daniel

Works fine, but, I’m getting this text in the browser console after my scene loads:

Error in undefined: TypeError: Cannot read property 'parentNode' of null

That text appears only when I run the function that you mentioned above to delete the loader on scene load. If it’s not run, there’s no text in console. I have checked the ID properly, so, I’m sure that I’m trying to delete the correct element.

This is the code that I’m using as my custom preloader animation.:

<div class="loader" id="Loader">
	<div id="lottie"></div>
	<script>
		var animation = bodymovin.loadAnimation(
			{
				container: document.getElementById('lottie'),
				path: '${resourcesFolderName}/data.json',
				renderer: 'svg',
				loop: true,
				autoplay: true,
			})
	</script>
</div>

I’ve created my animation in Adobe After Effects CC 2019 and then used Bodymovin plugin to render SVG in real-time. However, I don’t think that matters because I tried using other simple images too.

Note: I’m replacing the ${resourcesFolderName} to my actual resources folder myself.

Here’s my file: Example.hype.zip (467.9 KB)

Is the error normal and safe to be ignored?

12

seems within your given example you never attach your above provided snippet. So the Div with id ‘Loader’ does not exist and can’t be removed …

13

I do attach it.

As I’ve understood from the opening post, we’ve to modify the Hype-generated HTML file and not add the preloader in the Hype document itself. So, once the HTML file is exported, I add the code that I provided in my previous post. On scene load, my custom preloader does get deleted, but, the text also appears.

14

However ... this means that an element does not exist when the query to get this element is executed ...

so perhaps it's never been in the dom or already removed ...

1 Like
15

I’ll have to keep trying then. At the moment, I’m using z-index property to bring another object in front of my preloader to hide it.

16

Example_divIsReady_corr0109_1756.hype.zip (492.9 KB)

it’ll be a loading/timingquestion as the bodymovinlibrary is quite enormous for usage as preloader :slight_smile:

2 Likes
17

Oh, great. Thanks a lot. That’s really an interesting way to use the preloader.

Yeah, I’m aware about the possible issues due to the size of the library, however, my document is going to contain a lot of images to preload which might take some time.

18

Are you sure that your removeLoader function is correct? Because, now I’m seeing in developer tools that, the element isn’t deleted and it’s opacity is continuously decreasing without an end. I’m no JavaScript expert and thus, can’t actually check if the code is really problematic. But, as far as I know, since loader div has a z-index of 9999, it’ll be on the top in almost all cases. So, if the element isn’t deleted from DOM, I probably won’t be able to interact with anything below it. Can you please check it?

19

sry, please try again :slight_smile:

2 Likes
20

Amazing. Thanks a lot.

21

Hello Daniel,

I'm working on a Spanish project and I would like to change the default loading screen English text into Spanish (Cargando)

Would it be possible please to explain this?

Thanks very much

1 Like
22

I assume you mean not the custom one referred to in this post, but the "default" for when you check "Show loading indicator" in the Document Inspector?

If you run Hype in Spanish, then the Loading text will be localized to "Cargando" when exporting.

23

Hi - Thanks for your replied! Correct, I’m talking about the default loading indicator.
I’m based in the UK and using the English version of Hype. I need to create 2 projects, one in English and one duplicated in Spanish. These are to be used internally at work.

I will try and change the language in settings!

Thanks

1 Like
24

You can also use Hype Document Loader to inject a loader on the fly.

3 Likes