Demo Download See on github
Simply add beautiful and customizable loader for async tasks
You don't need jQuery or another framework ;)
Demo Download See on github

Install

Options

You can use send some options to the BimLoader.start() to customize the display of the loader.
Option Description
template
Default values "default"
Available values You can define, name and use your template as you want
Description The loader template used
timeout
Default values 10000
Available values int
Description Time (in ms) before the request is considered failing
parent
Default values document.getElementsByTagName('body')[0]
Available values any DOM element
Description The DOM Element in which the loader is dislayed
onStart
Default values null
Available values any function
Description The callback function called before the loader is displayed.
If the function return true, the process will be stopped, so the loader will n ot be displayed automatically
ex : 
	/** 
	 * Parent
	 *
	 * @param  {[type]} parent     Container of loader
	 * @param  {array} loaderData       Loader options
	 *
	 * @return {boolean} stop process
	 */
	function beforeDisplay(parent , loaderData){
		//  actions
		return false;
	}
onDisplay
Default values null
Available values any function
Description The callback function called after the loader is displayed.
ex : 
	/** 
	 * Parent
	 *
	 * @param  {[type]} parent     Container of loader
	 * @param  {array} loaderData       Loader options
	 *
	 * @return {void}
	 */
	function afterDisplay(parent , loaderData){
		//  actions
	}
onStop
Default values null
Available values any function
Description
Description The callback function called when the loader is ending, before the loader is removed.
If the function return true, the process will be stopped, so the loader will not be removed automatically
ex : 
	/** 
	 * Parent
	 *
	 * @param  {[type]} parent     Container of loader
	 * @param  {array} loaderData  Loader options
	 *
	 * @return {boolean}	stop process
	 */
	function beforeRemove(parent , loaderData){
		//  actions
		return false;
	}
onRemove
Default values null
Available values any function
Description
Description The callback function called when the loader is ending, after the loader has been removed.
ex : 
	/** 
	 * Parent
	 *
	 * @param  {[type]} parent     Container of loader
	 * @param  {array} loaderData  Loader options
	 *
	 * @return {void}
	 */
	function afterRemove(parent , loaderData){
		//  actions
	}
onTimeout
Default values nul
Available values any function
Description
Description The callback function called when the loader is stope after timeout. This is called before the onStop callback.
ex : 
	/** 
	 * Parent
	 *
	 * @param  {[type]} parent     Container of loader
	 * @param  {array} loaderData  Loader options
	 *
	 * @return {void}
	 */
	function onTimeout(parent , loaderData){
		//  actions
	}

Methods

You can use some methods to enhance the loader behavior.
Attention ! To be sure that the BimLoader is available, use it only when the object is loaded, when the BimLoaderReady is dispatched : 
	<script type="text/javascript">
		<!--
		$(document).on( "BimLoaderReady" , function(){
			// BimLoader is ready for actions : 

		} );
		-->
	</script>
Method Description
BimLoader.
  setDefaultOptions( options )
options Object
Description Allows you to redefined the default options used in the start method.
ex : 
	<script type="text/javascript">
		<!--
		$(document).on( "BimLoaderReady" , function(){
			// BimLoader is ready for actions : 
			BimLoader.setDefaultOptions({timeout:5000})
		} );
		-->
	</script>
BimLoader.
  loadTemplate( templateName , templatePath)
templateName The template identifier
templatePath The template path, where to load the template
Description Allows you to add your own templates loading a template file. This method uses asynchronous ajax, and so you'd better load all the templates before the document is ready.
If you don't want to load a template asynchronously, you will be able to set the content of a template in string with BimLoader.setTemplateContent()
ex : 
	<script type="text/javascript">
		<!--
		$(document).on( "BimLoaderReady" , function(){
			// BimLoader is ready for actions : 
			BimLoader.loadTemplate("MyTemplate" , "./templates/my_template.html")
		} );
		-->
	</script>
BimLoader.
  setTemplateContent( templateName , templateContent )
templateName The template identifier
templateContent The template content
Description Allows you to add your own templates without loading a distant template file.

ex : 
	<script type="text/javascript">
		<!--
		$(document).on( "BimLoaderReady" , function(){
			// BimLoader is ready for actions : 
			BimLoader.setTemplateContent("MyTemplate" , "<div>I am loading...</div>")
		} );
		-->
	</script>
BimLoader.
  setDefaultTemplate( templatePath )
templatePath The template path
Description Allows you to define the default template to use

ex : 
	<script type="text/javascript">
		<!--
		$(document).on( "BimLoaderReady" , function(){
			// BimLoader is ready for actions : 
			BimLoader.setDefaultTemplate( "./my_default_template.html")
		} );
		-->
	</script>
BimLoader.
  setDefaultTemplateContent( templateContent )
templateContent The template content
Description Allows you to define the default template content

ex : 
	<script type="text/javascript">
		<!--
		$(document).on( "BimLoaderReady" , function(){
			// BimLoader is ready for actions : 
			BimLoader.setDefaultTemplateContent( "<div>I am loading...</div>")
		} );
		-->
	</script>
BimLoader.
  start( options )
options List of specific options
Description Display the loader

ex : 
	<script type="text/javascript">
		<!--
		$(document).on( "BimLoaderReady" , function(){
			// BimLoader is ready for actions : 
			BimLoader.start( {template:"MyTemplate" , parent:$("footer")[0]} )
		} );
		-->
	</script>
BimLoader.
  stop( parent )
parent DOM Element : The parent loader in wich the loader is displayed
Description Hide the loader when a response is coming

ex : 
	<script type="text/javascript">
		<!--
		$(document).on( "BimLoaderReady" , function(){
			// BimLoader is ready for actions : 
			BimLoader.stop( $("footer")[0] )
		} );
		-->
	</script>
BimLoader.
  removeLoaderElements( parent )
parent DOM Element : The parent loader in wich the loader is displayed
Description Remove the loader from its parent

ex : 
	<script type="text/javascript">
		<!--
		$(document).on( "BimLoaderReady" , function(){
			// BimLoader is ready for actions : 
			BimLoader.removeLoaderElements( $("footer")[0] )
		} );
		-->
	</script>
BimLoader.
  getLoaderElements( parent )
parent DOM Element : The parent loader in wich the loader is displayed
Description Returns the loader from its parent

ex : 
	<script type="text/javascript">
		<!--
		$(document).on( "BimLoaderReady" , function(){
			// BimLoader is ready for actions : 
			BimLoader.getLoaderElements( $("footer")[0] )
		} );
		-->
	</script>