Customizable Loading Modal Plugin - jQuery modal-loading

File Size: 7.49 KB
Views Total: 11561
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.