loaderjs is a little library for simple animations, which are displayed while a webpage is loading.
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>
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!
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>