https://github.com/aligilan/loading

Very simple and light-weight loading with vanillajs
https://github.com/aligilan/loading

js loading loading-spinner overlay-loading vanilla-js

Last synced: about 1 month ago
JSON representation

Very simple and light-weight loading with vanillajs

• Host: GitHub
• URL: https://github.com/aligilan/loading
• Owner: aligilan
• License: mit
• Created: 2020-11-18T06:08:24.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-01-06T06:23:03.000Z (almost 4 years ago)
• Last Synced: 2024-10-06T06:53:39.348Z (3 months ago)
• Topics: js, loading, loading-spinner, overlay-loading, vanilla-js
• Language: JavaScript
• Homepage:
• Size: 23.4 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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)` .