Skip to content

JS Loader is a lightweight jQuery plugin written by Berka Ayowa that helps you create an animated spinner with a fullscreen loading mask

Notifications You must be signed in to change notification settings

berkaayowa/js_loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 

Repository files navigation

JS Loader

JS Loader is a lightweight jQuery plugin written by Berka Ayowa that helps you create an animated spinner with a fullscreen loading mask

To use it you just have to include jQuery and a copy of JS Loader plugin in your head or footer:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../loader.js"></script>

Properies

Attribute Description Example Default Value
gifUrl Url for a spinner gif image. "./images/loader.gif" NULL
bgRgab Background color in Rgab format. 'rgba(53, 53, 53, 0.8)' 'rgba(53, 53, 53, 0.8)'
color Loading Text color. '#eaeaea' 'White'
message Loading Text 'Please waite' 'Loading...'

Events

Event Description
onStartLoading Fires when loading starts
onFinishLoading Fires when loading starts

Methds

Methd Description
show To start showing loader
hide To stop showing loader
setMessage To set loading text
setHtmlMessage To set loading text as html element

Basic Initialize

$('#loader').loader();

Initialize with options

$('#loader').loader({
    gifUrl: "./images/loader.gif",
    bgRgab:'rgba(53, 53, 53, 0.8)',
    color:'white'
});

Initialize with options and events

$('#loader').loader({
    gifUrl: "./images/loader.gif",
    bgRgab:'rgba(53, 53, 53, 0.8)',
    color:'white',
    onStartLoading: function() {
        console.log("started loading");
    },
    onFinishLoading: function() {
        console.log("Finished loading");
    }
});

Method calls

$('#loader').loader('setMessage', 'Please waite');
$('#loader').loader('setHtmlMessage', '<h1>Waiting..</h1>');

Show/Start loading (Method)

$('#loader').loader('show');

Hide/Stopt loading (Method)

$('#loader').loader('hide');

Demo

Source code for this demo is under example/index2.html

About

JS Loader is a lightweight jQuery plugin written by Berka Ayowa that helps you create an animated spinner with a fullscreen loading mask

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published