This time I will share jQuery Plugin and tutorial about Responsive Custom Loading Overlay/Mask Plugin – jQuery p-loading, hope it will help you in programming stack.
| File Size: | 28.5 KB |
|---|---|
| Views Total: | 3205 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
1 |
<link href="dist/css/p-loading.css" rel="stylesheet"> |
2 |
<script src="https://code.jquery.com/jquery.min.js"></script> |
3 |
<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
01 |
<!-- spinkit addon --> |
02 |
<link rel="stylesheet" href="pl-spinkit.css"> |
03 |
<script src="pl-spinkit.js"></script> |
04 |
05 |
<!-- Font Awesome addon --> |
06 |
<link rel="stylesheet" href="pl-fontawesome.css"> |
07 |
<script src="pl-fontawesome.js"></script> |
08 |
09 |
<!-- progress bar addon --> |
10 |
<link rel="stylesheet" href="pl-progress.css"> |
11 |
<script src="pl-progress.js"></script> |
3. Apply the loading overlay/mask to a specific container.
1 |
$('.element').ploading({ |
2 |
// options here |
3 |
}) |
4. Override the default settings to customize the loading overlay/mask.
01 |
$('.element').ploading({ |
02 |
03 |
// 'show' or 'hide' |
04 |
action: "show", |
05 |
06 |
// container html |
07 |
containerHTML: "<div/>", |
08 |
09 |
// container Attributes and custom attributes (class,id,for,etc) |
10 |
containerAttrs: {}, |
11 |
12 |
// Container CSS classes |
13 |
containerClass: "p-loading-container", |
14 |
15 |
// spinner html |
16 |
spinnerHTML: "<div/>", |
17 |
18 |
// spinner Attributes and custom attributes (class,id,for,etc) |
19 |
spinnerAttrs: {}, |
20 |
21 |
// spinner CSS classes |
22 |
spinnerClass: "p-loading-spinner piano-spinner", |
23 |
24 |
// a function to execute when the container get displayed |
25 |
onShowContainer: undefined, |
26 |
27 |
// a function to execute when the container get hidden |
28 |
onHideContainer: undefined, |
29 |
30 |
// a function to execute when the container is destroyed |
31 |
onDestroyContainer: undefined, |
32 |
33 |
// a function to hide the container |
34 |
hide<a href="https://www.jqueryscript.net/animation/">Animation</a>: defaultHideAnimation, |
35 |
36 |
// a function to show the container |
37 |
showAnimation: defaultShowAnimation, |
38 |
39 |
// destoy the container after it gets hidden |
40 |
destroyAfterHide: false, |
41 |
42 |
// ID prefix of the container |
43 |
idPrefix: "loader", |
44 |
45 |
// namespace of the plugin used in the data attribute of the selected node |
46 |
pluginNameSpace: "p-loader", |
47 |
48 |
// add the p-loading-mask class to the selected node |
49 |
maskHolder: true, |
50 |
51 |
// the background color of the mask |
52 |
maskColor: "rgba(0,0,0,0.6)", |
53 |
54 |
// addons |
55 |
useAddOns: [] |
56 |
|
57 |
}) |
This awesome jQuery plugin is developed by joseshiru. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
