(Last Updated: March 5, 2018)

Already built delightful HTML5 animation but now getting concerned about your page load time? How about adding an elegant animated preloader aka a loading screen to brighten up the seconds of waiting? Keep reading as you will find useful preloader-related information in this brief tutorial.

This tutorial covers:

  1. What is a Preloader?
  2. Customizing Preloaders

What is a Preloader?

It’s essential for your page to preload contents so that they will be available once they are required later on. That’s what a preloader does. Preloaders help you avoid bad experiences such as images slowly peeling down the screen. Thus, it prevents your page from appearing broken when it tries to load large files.

At the same time, preloaders aka loading screens provide feedback to users by telling them that the process is in action. Without preloaders, users may feel uncertain about the site, get frustrated, and quickly move on.

loading screen spinner & progress bar

You’ve likely encountered thousands of preloaders while surfing the web. Typically, they show a numeric and/or visual indicator of the loading process. A spinner or a progress bar often appears when the loading begins and fades away when everything is ready.

Customizing Preloaders

By default, Saola Animate documents preload all image resources before showing a scene. To show the loading progress, they displays a loading indicator including a spinner and a percentage sign.

saola animate default loading indicator

Saola Animate allows you to easily customize the look and feel of this loading indicator. Moreover, in case you don’t satisfy with it, thinking that it rather simple and boring, you can create your own loading screen.

But first, let’s find out the way to access the preloader in Saola Animate. Perform the following steps:

Step 1: Open the Document pane. If you don’t see this pane, from the main menu, click View > Document.

Step 2: Saola Animate offers two preloader types: Default and Custom. Select either of the two (1) and click Edit (2) to modify as you like.

saola animate preloader

The following parts discuss each type of preloaders in turn.

Default Preloaders

When you choose Default preloader, a window appears allowing you to customize the loading indicator. All changes you make are immediately reflected in the preview window.

default preloader

The loading indicator has six editable properties. To adjust their values, you can drag the handle on the slider, scroll the mouse wheel, or enter a new value. The properties are as follows:

  • Diameter: Set the diameter of the loading indicator.
  • Density: Set the number of shapes drawn on the loading indicator.
  • Range: Set the amount of the modified shapes in percentages. Specifically, it sets what range of the shapes should be scaled and/or faded. The shapes that are out of this range will be scaled and/or faded with a minimum amount only. If the range is 0.1, every shape out of the range will be scaled and/or faded to 10% of the original values. The visually acceptable range value should be between 0.4 and 1.5. The default value is 1.0.
  • Speed: Set the speed of the loading indicator animation. This value tells the loading indicator how many shapes to skip by each tick.
  • Color: Set the color of the loading indicator in RGB.
  • Shape: Set the type of the loading indicator shapes, including oval, spiral, square, rectangle, and rounded rectangle.

loading indicator

Custom Preloaders

When you choose Custom preloader, Saola Animate opens a preloader document (3) where you can create a loading screen of your own. A custom preloader is a document, so you can create animation as normal.

custom preloader

Mind the following:

  • The loading indicator appears by default, but you can clear the Loading Indicator check box (4) to turn it off. Of course, you can modify it as normal (5).
  • A custom preloader document will close if you close the main document or if you switch from Custom to Default preloader.

For tech-savvy users, take advantage of the preloader events (6) to add interactivity to your loading screen. Saola Animate offers five events as follows:

  • Start: Occur when the preloader starts.
  • Progress: Occur when the preloader is in progress, from start to end.
  • Complete: Occur when the preloader loads all resources completely.
  • Item Start: Occur when the preloader starts loading one resource.
  • Item Complete: Occur when the preloader finishes loading one resource or a load error happens.

Note: Seeing clever but simple animation may distract you from waiting too long. So, it can be a nice choice to create a cool loading screen for delay. But remember not to over-animate your loading screen or you will overload your document with unnecessary graphics, for example.

At the end of the day, your loading screen must be lightweight, otherwise you may have to wait for it before waiting for the page. Definitely, it’s weird and ineffective.

So now don’t worry about your Saola Animate animation any more as it always goes with a elegant spinning preloader. Of course, it’s all up to you to get creative and create your own preloading effect.

Receive the latest news and updates on Saola Animate.

A confirmation email has been sent to your mailbox, please confirm your subscription!

Pin It on Pinterest