spreloader
v1.0.5
Published
"Create a Loading Screen to preloader content for your website"
Readme
sPreLoader
Create a Loading Screen to preloader content for your website.
- Easy for setup
- Minify: 3Kb
Installation
In order to install it you can run:
$ npm install spreloaderSave into package.json
$ npm install spreloader --saveUsage
After <body> tag:
<div id="sPreLoader"></div>Use javascript like this:
<script type="text/javascript">
$('body').sPreLoader();
</script>Option:
<script type="text/javascript">
$('body').sPreLoader({
colorBarOuter: "transparent", // Color of Background Bar Process
colorBar: '#e8119b', // Color of Bar
heightBar: '3px', // Height of Bar
colorBg: '#fff', // Color of Background when fullscreen
colorText: '#000', // Color of text percentage
showPercent: true, // True: show percent(%) with fullscreen
// False: just show process bar
debugMode: false, // Debug Mode
delay: 800, // Delay time(ms) to hide preloader
zindex: 1000,
allPage: false
// True: Do not need include <div id="sPreLoader"></div> into html file.
});
</script>Callback:
<script type="text/javascript">
$('body').sPreLoader({
option...
}, function(){
console.log("Function callback here...")
});
</script>Tech
sPreLoader uses a number of open source projects to work properly:
- [jQuery] - Jquery 1.12
- [Twitter Bootstrap] - great UI boilerplate for modern web apps
Bug
If you get bug or any issues. Please email to me([email protected])! Thank you so much.
Todos
- Content with Image(brand logo, photo, etc...)
- Add Night Mode
License
MIT