Creating a Custom Preloader

When you have ‘Show Loading indicator’ checked in the Document inspector, your visitors will see a notice when your document is loading. Below are a couple ways you can change this loading screen:

Show an image while your Tumult Hype document loads

This video by @darren_pearson is a good walkthrough of how to to this.

First of all, if your Tumult Hype document is loading slowly, this article gives tips on speeding it up. The quickest thing you can do is to open the Resource Library and uncheck ‘Preload’ for large images.

To set this up, you’ll need an HTML editor to accomplish this, but you won’t need to know any code whatsoever. We recommend using HyperEdit, [Sublime Text][3], or Atom to edit HTML.

First, we’ll make sure that the ‘loading’ image you’re going to use will appear:

  1. In the ‘Document Inspector’ make sure ‘Make background transparent’ is checked.

  2. Uncheck ‘Show Loading Indicator’

  3. Export your Hype animation into a folder. Make sure you select ‘Also create html file’ in the export options. Edit the exported .html file in your HTML editor, and you’ll see a div that looks like this:

    Next, create an image you’d like to show when that Tumult Hype document is loading. Ideally, this would be the same size as your Tumult Hype document’s scene size. (The size is shown above is width:600px;height:400px;). A small animated GIF might be perfect for your needs.

    You’ll need to save this image in the folder where your DOCUMENTNAME.html file is located.

    Next, we’ll add a reference to that image into the exported HTML code generated by Tumult Hype by modifying the code above. It will be placed within the div that centers our Tumult Hype document, which is also directly above the small code snippet above.

    <div id="DOCUMENTNAME_hype_container" style="position:relative;overflow:hidden;width:800px;height:400px;">
     
              <!-- inserted loader code: -->
              <div style="position:absolute;height:400px;top:0;left:0px;">
                 <img src="image.jpg">  
                 <h3 style="color:gray;">Loading...</h3>          
              </div>
              <!-- end inserted loader code -->
     
      <script type="text/javascript" charset="utf-8" src="DOCUMENTNAME.hyperesources/DOCUMENTNAME_hype_generated_script.js?69860">
      </script>
    </div> 
    

    This code (part of the above code) centers your loading image and references it:

    <div style="position:absolute;height:400px;top:0;left:0px;">
      <img src="image.jpg">
      <h3 style="color:gray;">Loading...</h3> 
    </div>
    

    Notice that the height of the div containing your image is the same as the height of your document. If your image is smaller than your Hype document, you’ll need adjust the ‘top:’ and ‘left:’ values to move your image to the center of the DIV that contains your Tumult Hype document.

    That’s it – open your main .html file from your web server and you should see your loading image. If you open this HTML file from your computer, it will likely load so quickly that you won’t see your image (try it on a mobile device, or use Network Link Conditioner.

    Please make sure that your loading image is a very low file size!

    Spin.js - An image-free loading spinner

    Spin.js is a customizable loading graphic that is pretty easy to integrate into a Hype document.

    Two things need to be changed in your exported .html document to get this to work: First, open up the included .hype file at the bottom of this document. You’ll notice that spin.js is included in the resources library. (You can use the .hype document as a starting point). The other modification to this file is in the HEAD area of the document. You can edit the contents of the <head>...</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector. After exporting, you’ll need to add this code to your document:

    <div style="margin:150px auto;" id="spinnerarea"></div>

    The ‘margin’ value pushes the spinner down slightly, and centers it in the window.

    Next, you’ll need to add the settings code at the bottom of your document before the body tag:

    <!-- Use the options on http://fgnass.github.com/spin.js to set these properties -->
    <script type="text/javascript" charset="utf-8">
      var opts = {
      lines: 13, // The number of lines to draw
      length: 7, // The length of each line
      width: 4, // The line thickness
      radius: 10, // The radius of the inner circle
      rotate: 0, // The rotation offset
      color: '#000', // #rgb or #rrggbb
      speed: 1, // Rounds per second
      trail: 60, // Afterglow percentage
      shadow: false, // Whether to render a shadow
      hwaccel: false, // Whether to use hardware acceleration
      className: 'spinner', // The CSS class to assign to the spinner
      zIndex: 2e9, // The z-index (defaults to 2000000000)
      top: 'auto', // Top position relative to parent in px
      left: 'auto' // Left position relative to parent in px
      };
      var target = document.getElementById('spinnerarea');
      var spinner = new Spinner(opts).spin(target); 
    </script>
    

    That’s it! Please take a look at the attached .html document and .hype file for an example.

    spinnerdemo.zip (6.2 MB)

8 Likes

Does the Hype JavaScript API expose the number of files that have to be loaded and how many files have already been preloaded? We would like to create a preloader that presents this information to the user as this might be a better indicator for the user when loading huge projects.

At this time, no, but that’s a great suggestion.

the spin.js almost does it.the spinning wheel disappear, when all data is loaded.

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

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);

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.

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!

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

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

1 Like

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

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 …

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.

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

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.

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

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.

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?

sry, please try again :slight_smile:

2 Likes

Amazing. Thanks a lot.