loader.js

loaderjs is a little library for simple animations, which are displayed while a webpage is loading.

Installation

The installation of the loaderjs plugin is quite simple, although there are two ways to go:
bower
bower install loaderjs
if this was successfull, you can link the loaderjs-script like that
<script src="bower_components/loaderjs/loader.js"></script>
_{for more information, visit bower}
github clone
git clone https://github.com/mspringsits/loader.js.git
after you have cloned the project to your disk, you can simply take the loader.js-file and copy it to your own project.
_{for more information, visit git}
Attention: loaderjs requires JQuery!
<script src="bower_components/jquery/dist/jquery.min.js"></script>

Usage

Generally there a three methods, that have to be called, that loaderjs works properly:

• Loader.preload();
• Loader.main();
• Loader.finish();
  All methods have to be given to make loaderjs work properly!

Loader.preload();

The preload method is used to handle background(graphically) while the page is loading.
Several backgrounds are implemented from begin, which can be given with a string parameter:
preload([background], [parameter]); background(string):

• "no-display": nothing is displayed, the page will be empty
• "black-background": a black background will be displayed
• "custom-background": a custom background-color will be displayed; the color has to be transmitted with the parameter as string
• "alpha": the opacity of the loading page will be set to 0.5; if a custom opacity is wanted, you must use the parameter as a float-number

Loader.main();

The main method is the 'core' of loaderjs.
It is used to manage the effects that are displayed while the page is loading.
parameters:
main([action], [parameter]); action(string):

• "standard": a simple standard spinner
• "custom": insert your custom html while the page is loading; the html has to be provided to the parameter as a string
• "dots": a simple loader with dots, which are displaying the progress
• "spectrum": a growing and shrinking circle, displaying the loading progress
• "futuristic": a very futuristic loader
• "text": a custom text, provided as string through parameter will be displayed

Loader.finish();

The finish method handles what has to be done when the site has loaded properly.
parameters:
finish([action], [parameter]): action(string):

• "fade": the content will be faded back in, the fade-time can be handled with the parameter given as a number in milliseconds; the default value will be one second

if no action is provided, the content will be displayed without any effects
for testing purposes of the Loader.main()-method you can simply outcomment Loader.finish();

Note that all three methods have to be used for a proper use!

Examples

fancy dot loader with black background

<script>
    $(document).ready(function() {
        Loader.preload("black-background");
        Loader.main("dots");
        Loader.finish();
    });
</script>

futuristic spinner with no background

<script>
    $(document).ready(function() {
        Loader.preload("no-display");
        Loader.main("futuristic");
        Loader.finish("fade", 1500);
    });
</script>