Customizable Loading Modal Plugin - jQuery modal-loading

modal-loading is a jQuery plugin to create animated, highly customizable, modal-style loading indicators for ajax/async loading content.

Main features:

• Support both directions.
• Custom loading text (title and description).
• With or without background overlay.
• Supports custom loading spinner.
• With or without show/hide animations (based on CSS3).

How to use it:

1. Insert jQuery library and the jQuery modal-loading plugin's files into the webpage.

<!-- Core stylesheet -->
<link rel="stylesheet" href="modal-loading.css">

<!-- CSS3 animations -->
<link rel="stylesheet" href="modal-loading-animate.css">

2. Display a default loading modal on the screen.

var loading = new Loading();

3. Customize the loading modal with the following settings.

var loading = new Loading({

    // 'ver' or 'hor'
    direction: 'ver',

    // loading title
    title: undefined,

    // text color
    titleColor: '#FFF',

    // font size
    titleFontSize: 14,

    // extra class(es)
    titleClassName: undefined,

    // font family
    titleFontFamily:   undefined,

    // loading description
    discription: undefined,

    // text color
    discriptionColor:  '#FFF', 

    // font size
    discriptionFontSize: 14,

    // extra class(es)
    discriptionClassName: undefined,

    // font family
    directionFontFamily: undefined, 

    // width/height of loading indicator
    loadingWidth: 'auto',
    loadingHeight: 'auto',

    // padding in pixels
    loadingPadding: 20,

    // background color
    loadingBgColor: '#252525',

    // border radius in pixels
    loadingBorderRadius: 12, 

    // loading position
    loadingPosition: 'fixed',

    // shows/hides background overlay
    mask: true,

    // background color
    maskBgColor: 'rgba(0, 0, 0, .6)',

    // extra class(es)
    maskClassName: undefined,

    // mask position
    maskPosition: 'fixed',

    // 'image': use a custom image
    loadingAnimation: 'origin',

    // path to loading spinner
    animationSrc: undefined,

    // width/height of loading spinner
    animationWidth: 40, 
    animationHeight: 40, 
    animationOriginWidth: 4, 
    animationOriginHeight: 4,

    // color
    animationOriginColor: '#FFF',

    // extra class(es)
    animationClassName: undefined,
    
    // auto display
    defaultApply: true,

    // animation options
    animationIn: 'animated fadeIn',
    animationOut: 'animated fadeOut',
    animationDuration:  1000, 
    
    // z-index property
    zIndex: 0,
    
});

---

This awesome jQuery plugin is developed by rainydaycode. For more Advanced Usages, please check the demo page or visit the official website.