Bombloader.js-master NPM

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 public folder.
Place bombLoader.min.css and bombLoader.min.js in the proper directories.
The bombLoader directory will need to be place in the same directory as bombLoader.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 CLASSname (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'
   });

]);

@infinitebrahmanuniverse/nolb-bom @everything-registry/sub-chunk-1251 @zalastax/nolb-bom

1.0.2

4 years ago

1.0.0

4 years ago