@aligilan/loading

Loading

Very simple and light-weight loading with vanilla-js

Install

npm install @aligilan/loading --save

How to use

1- Import style

Add @aligilan/loading/style.css in header.
Or
In your sass file add @import "~@aligilan/loading/style.css";

---

2- Import js

let loading = require('@alilan/loading');
let normal_loading = new loading();
normal_loading.toggle(target)

---

In Laravel:

Import:

path: resources/app.js window.Loading = require('@aligilan/loading');
In your page script tag: let normal_loading = new Loading;

Example:

Use in header tag, when DOM is ready
document.addEventListener("DOMContentLoaded", function(){ normal_loading.toggle('#my-element') });

Or

Use when window loaded:
window.onload = function(){ normal_loading.toggle('#my-element') }

---

target
Valid target element types are: query-select-string, element-object, element-objects

Now when ever call normal_loading.toggle(target), for first time, that shows loading-spinner (spinner with overlay are inside the target and isn't clickable) and at the next call loading-spinner will disappear.

Or normal_loading.show(target) then normal_loading.hide(target) .