Examples

Setup

Setting up an instance of Loader is easy. Like all Mk components, Loader takes two arguments: a root and config options. The root for Loader is going to be a container element that houses the dynamic content waiting to be changed, or if you're using Loader for another purpose the root is where you'd like the Loader to be appended to. The settings is just a JavScript object of parameters you can pass in. Below is an example of setting up a loader and all possible configuration settings.

*Loader appends a childen into your container temporarily. This may or may not mess with your React virtual DOM depending on how your app is setup. Loaders are completely removed when hide() is invoked, so in most cases Loader will not mess with virtual DOM lookups.*

var Loader = Mk.get('Loader');
var loader = new Loader('#my-container', {
	// refocus back to the top of the container after hide() is invoked.
	refocus: true/false,
	// specify the type of loader to render. Default is 'default'
	type: 'default|samsung|windows|spincycle|bar|bubble|<custom loader you create>',
	templates: {
		.. override templates for this instance only..
	},
	formats: {
		.. override formats for this instance only..
	}
});

Events

All events are part of the Mk EventEmitter and *not* added to the DOM. Events are also called in context of the component instance so it isn't a great idea to use a proxy function to change context, as you'll loose a lot of beneficial object access.

instance.on('show', function (data) {
	console.info('loader is visible!');
});
		

instance.on('hide', function () {
	console.info('loader is now gone!');
});
		

instance.on('focus', function () {
	console.info('Focus reshifted!');
});
		

API

Below are the different public properties and methods accessible to you, the end developer. All of these are accessible on your Loader [ld] instance as well as inside event handlers bound to your instance. Some methods have intentionally been left out due to their difficulty tof use for end developers vs. internal use.