Simple Loader
Create fantastic full-page loading screens using minimal effort. See the full Demo
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:
<head>
..
<!-- Simple Loader CSS -->
<link rel="stylesheet" type="text/css" href="./css/simple-loader.css" />
..
</head>Add this line before closing body tag of index.html as:
<body>
..
<!-- Simple Loader JS -->
<script src="./js/simple-loader.js" type="text/javascript"></script>
</body>Usage
To show the loader add this line in your js file:
simpleloader.show();To hide the loader add this line in your js file:
simpleloader.hide();For example, to show a loader while in a http request:
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:
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:
simpleloader.background("#fff"); // 3-digit hexcode
simpleloader.background("#2196f3"); // 6-digit hexcodeTo set the foreground color add this line in your js file:
simpleloader.foreground("#fff"); // 3-digit hexcode
simpleloader.foreground("#2196f3"); // 6-digit hexcodeContribution
I welcome pull requests from all! Thanks in advance! Visit our Contributions page for more information.
Code of Conduct
Visit our Code of Conduct page for an overview on our ground rules.
License
Created and Maintained by Divakar Manivel. Licensed under MIT.