A web component allowing to display opaque animations while an HTML page is loading.

This component aims to be used in web applications for which the rendering process is done on the client-side. It provides an elegant solution to the glitch problem encountered by this type of applications by displaying early in the rendering process of the page an animation until the developer decides to hide it when the rendering is done.

Current version: 1.0.1

Lead Maintainer: Halim Qarroum

Install

Using NPM

npm install --save preloader-js

Using Bower

bower install --save preloader-js

Usage

You first need to include the preloader.css stylesheet into your application.

<link rel="stylesheet" href="path/to/preloader-js/assets/css/preloader.css">

Then simply declare at the top of your body tag the preloader container, along with the animation of your choice.

<!-- Preloader using the `rotating-square` animation -->
<div class="preloader">
  <div class="animation animation-rotating-square"></div>
</div>

Finally, once you have included the preloader.js asset into your application using either a <script> tag, an AMD loader, or a CommonJS loader, you can call the .show or the .hide methods to control the lifecycle of the preloader module.

// Hides the preloader with a fade out animation.
preloader.hide();
// Shows the preloader.
preloader.show();

Animations

Below is alist of the different animations which have been built into this library.

Rotating Square

Example

<!-- Preloader using the `rotating-square` animation -->
<div class="preloader">
  <div class="animation animation-rotating-square"></div>
</div>

Color wheel

Example

<!-- Preloader using the `color-wheel` animation -->
<div class="preloader">
  <div class="animation animation-color-wheel"></div>
</div>

Lego

Example

<!-- Preloader using the `lego` animation -->
<div class="preloader">
  <div class="animation animation-lego"></div>
</div>