Responsive Custom Loading Overlay/Mask Plugin - jQuery p-loading

p-loading is a simple, customizable, responsive jQuery loading indicator plugin that helps you create a loading overlay (with a custom loading spinner) on the whole page or over single DOM elements.

How to use it:

1. Load the necessary JavaScript and CSS files in the html document.

<link href="dist/css/p-loading.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="dist/js/p-loading.js"></script>

2. Load an addon of your choice for custom loading spinners. Available addons:

• pl-progress: progress bar
• PL-fontawesome: Font Awesome based loading spinners
• pl-spinkit: Spinkit based loading spinners

<!-- spinkit addon -->
<link rel="stylesheet" href="pl-spinkit.css">
<script src="pl-spinkit.js"></script>

<!-- Font Awesome addon -->
<link rel="stylesheet" href="pl-fontawesome.css">
<script src="pl-fontawesome.js"></script>

<!-- progress bar addon -->
<link rel="stylesheet" href="pl-progress.css">
<script src="pl-progress.js"></script>

3. Apply the loading overlay/mask to a specific container.

$('.element').ploading({
  // options here
})

4. Override the default settings to customize the loading overlay/mask.

$('.element').ploading({

  // 'show' or 'hide'
  action: "show",    

  // container html
  containerHTML: "<div/>", 

  // container Attributes and custom attributes (class,id,for,etc)
  containerAttrs: {},                              

  // Container CSS classes
  containerClass: "p-loading-container",        

  // spinner html   
  spinnerHTML: "<div/>", 

  // spinner Attributes and custom attributes (class,id,for,etc)
  spinnerAttrs: {},                                

  // spinner CSS classes
  spinnerClass: "p-loading-spinner piano-spinner", 

  // a function to execute when the container get displayed
  onShowContainer: undefined,                      

  // a function to execute when the container get hidden
  onHideContainer: undefined,                      

  // a function to execute when the container is destroyed
  onDestroyContainer: undefined,                    

  // a function to hide the container
  hideAnimation: defaultHideAnimation,             

  // a function to show the container
  showAnimation: defaultShowAnimation,             

  // destoy the container after it gets hidden
  destroyAfterHide: false,                         

  // ID prefix of the container 
  idPrefix: "loader",             

  // namespace of the plugin used in the data attribute of the selected node                 
  pluginNameSpace: "p-loader",                     

  // add the p-loading-mask class to the selected node
  maskHolder: true,                                

  // the background color of the mask
  maskColor: "rgba(0,0,0,0.6)",   

  // addons                 
  useAddOns: []
  
})

---

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