https://github.com/divakarmanivel/simple-loader
Create fantastic full-page loading screens using minimal effort.
https://github.com/divakarmanivel/simple-loader
css3 javascript javascript-css loading-animations
Last synced: 2 months ago
JSON representation
Create fantastic full-page loading screens using minimal effort.
- Host: GitHub
- URL: https://github.com/divakarmanivel/simple-loader
- Owner: divakarmanivel
- License: mit
- Created: 2018-11-25T14:13:19.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-07T08:47:37.000Z (over 6 years ago)
- Last Synced: 2025-02-20T07:39:27.813Z (3 months ago)
- Topics: css3, javascript, javascript-css, loading-animations
- Language: HTML
- Homepage: https://divakarmanivel.github.io/simple-loader/
- Size: 39.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Simple Loader
Create fantastic full-page loading screens using minimal effort. See the full [Demo](https://divakarmanivel.github.io/simple-loader/)
# Setup
Copy all files from dist/js and dist/css to your applications folder.
Add this line in the head tag of index.html as:
```html
..
..
```
Add this line before closing body tag of index.html as:
```html
..
```
# Usage
To show the loader add this line in your js file:
```javascript
simpleloader.show();
```
To hide the loader add this line in your js file:
```javascript
simpleloader.hide();
```
For example, to show a loader while in a http request:
```javascript
function getRequest(url){
simpleloader.show();
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.send();
request.onreadystatechange = function () {
if (request.readyState == XMLHttpRequest.DONE) {
simpleloader.hide();
if (request.status == 200) {
alert("Success");
} else {
alert("Error");
}
}
};
}
```
To set the loader type add this line in your js file:
```javascript
simpleloader.type("spinner")
```
The default type if no type is specified is "spinner". Currently available types are:
- spinner
- bounceball
- ripple
- square-wave
- twin-spinner
To set the background color add this line in your js file:
```javascript
simpleloader.background("#fff"); // 3-digit hexcode
simpleloader.background("#2196f3"); // 6-digit hexcode
```
To set the foreground color add this line in your js file:
```javascript
simpleloader.foreground("#fff"); // 3-digit hexcode
simpleloader.foreground("#2196f3"); // 6-digit hexcode
```
# Contribution
I welcome pull requests from all! Thanks in advance! Visit our [Contributions](CONTRIBUTING.md) page for more information.
# Code of Conduct
Visit our [Code of Conduct](CODE_OF_CONDUCT.md) page for an overview on our ground rules.
# License
Created and Maintained by Divakar Manivel. Licensed under [MIT](LICENSE).