Creating a Custom Preloader

knowledgebase

#1

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)


Custom preloading screen that shows progress?
Circular Loading Animation
Custom Preloader
How to make custom preloader with Hype-based animation
How do I show "loading" quickly when my HTML 5 site is accessed?
Request information option Hype Profs
Preloading Videos (plus custom preloading screen)
Preloading Videos (plus custom preloading screen)
Adding custom html/css based animated pre-loader for slow loading sites
Loading logic - best practices?
Changing the Loading Screen
#2

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.


#3

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


(strmiska) #4

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


(mengdream) #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.


(Bas) #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:


#10

Knowledge base: Guides from the Tumult Team