preloader-js
v1.0.1
Published
A web component allowing to display opaque animations while an HTML page is loading.
Downloads
32
Readme
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>