bombloader.js-master
v1.0.2
Published
A simple jQuery interstitial loading screen
Readme
bombLoader.js
Simple customizable interstitial jQuery loading screen with GIF animation
This plugin will allow you to add a very simple jQuery insterstitial loading screen while the DOM element fully loads the content of your page/application.
Begin using bombLoader.js
- Download the .zip file of the plugin and extract the contents to your applications
publicfolder. - Place
bombLoader.min.cssandbombLoader.min.jsin the proper directories. - The
bombLoaderdirectory will need to be place in the same directory asbombLoader.min.css. It depends on the contents to deliver the proper GIF animation for loading. - Setup your empty div container
<div class="myDiv"></div> - Initialize bombLoadder.js and watch it go!
More in depth instructions...
- To initialize bombLoader.js add the bombLoader js/css tags in your head file. bombLoader.js requires jQuery!
<head>
<link href="/path/to/bombLoader.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="/path/to/bombLoader.min.js type="text/javascript"></script>
... </head>- After bombLoader.js is intialized, place a DIV element with any __CLASS__name (Do not use an ID tag) at the top of your page.
<body>
<div class="yourSpecialClass"></div>- Set your element up with the bombLoader.js plugin and enjoy!
$(function() {
$(".yourSpecialClass").bombLoader();
});bombLoader.js Options...
bombLoader.js comes with the ability to customzie the plugin with various styles and options. To use them, set their values at the time of intializing.
$(function() {
$(".yourSpecialDiv").bombLoader({
loader: 'loader-1',
text: 'Now loading...'
});
});A list of avaiable options and their default values are below:
| Property | Default | Description | | --- | --- | --- | | loader | 'loader-1' | Specifies the loading DIV to be used, as well as the GIF animation to be used for the interstitial screen | | text | 'Loading...' | Sets the text to be displayed along with the GIF animation in the interstitial screen | | textColor | '#ffffff' | Uses a HEX color code to define the color of the displayed text | | bgColor | '#262626' | Uses a HEX code to set the background color of the interstitial loading screen | | burnOut | '2345' | Sets the timeout (in milliseconds) to hide the loading animation |
An example of a working loading screen would look like:
$(function() {
$(".yourSepcialDiv").bombLoader({
loader: 'loader-2',
bgColor: '#00aaff',
text: 'This is a loading anim!',
textColor: '#ffffff',
burnOut: '1234'
});
]);