Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gemblue/jqloader
JQLoader is a Jquery plugin to show a loading bar, or full screen loading
https://github.com/gemblue/jqloader
Last synced: about 2 months ago
JSON representation
JQLoader is a Jquery plugin to show a loading bar, or full screen loading
- Host: GitHub
- URL: https://github.com/gemblue/jqloader
- Owner: gemblue
- Created: 2014-01-26T16:16:36.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2020-04-19T15:15:31.000Z (over 4 years ago)
- Last Synced: 2023-08-12T07:38:59.630Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 106 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JQLoader
JQLoader is a Jquery plugin to show a loading bar, or full screen loading
# Usage
Just include `JQLoader.css` and `JQLoader.js` in your HTML page.
Full code sample :
```html
body{
font-family:calibri;
}
.div_sample{
width:200px;
height:200px;
border:1px solid #dedede;
}
JQLoader
JQLoader is a Jquery plugin to show a loading bar, or full screen loading
Try our the Sample :
Full Screen Loading
Standard Theme
Open Standard
Close Standard
Bottom Bar Theme
Open
Close
Loading on the div
Open div Standard
Close div Standard
$(document).ready(function(){
// Full screen standard
$('#open_standard').click(function(){
$( "body" ).JQLoader({
theme: "standard",
mask: true,
background: "#444",
color: "#fff"
});
});
$('#close_standard').click(function(){
$( "body" ).JQLoader({
action: "close"
});
});
// Div standard
$('#open_div_standard').click(function(){
$( ".div_sample" ).JQLoader({
theme: "standard",
mask: true,
background: "#fff",
color: "#fff"
});
});
$('#close_div_standard').click(function(){
$( ".div_sample" ).JQLoader({
theme: "standard",
mask: true,
background: "#fff",
color: "#fff",
action: "close"
});
});
// Full screen
$('#open_bottom').click(function(){
$( "body" ).JQLoader({
theme: "bottom",
action: "open"
});
});
$('#close_bottom').click(function(){
$( "body" ).JQLoader({
theme: "bottom",
action: "close"
});
});
})
```