Activity Indicator

app.js

var LoadingIndicator = require('utils/ui/LoadingIndicator');

var win = Ti.UI.createWindow();
var loadingIndicator = new LoadingIndicator();

win.add(loadingIndicator);

loadingIndicator.show({message: 'Loading...'});

// TODO - Access to DB - Here I use timeout for demo purpose
setTimeout(function() {
	loadingIndicator.hide();
}, 2000);

win.open();

ui.js

(function() {
	/* =DEPENDENCIES
	 --------------------------------------------------------------------------- */
	var self = {};

	/* =CONSTRUCTOR
	 --------------------------------------------------------------------------- */

	/* =|ActivityIndicator()
	 *
	 * Creates an Activity indicator in the way that the platform dicates
	 *
	 * Returns:
	 * 	- container (Ti.UI.View | Ti.UI.ActivityIndicator)
	 --------------------------------------------------------------------------- */
	var ActivityIndicator = function() {
		self = this;
		
		var container;

		if (isAndroid()) {
			container = Ti.UI.createActivityIndicator({
				color : '#fff'
			});
		} else {
			container = Ti.UI.createView({
				width : '100%',
				height : '100%',
				top : 0,
				left : 0,
				visible : false,
				zIndex : 10
			});

			container.add(Ti.UI.createView({
				width : '100%',
				height : '100%',
				top : 0,
				left : 0,
				backgroundColor : '#000',
				opacity : 0.75,
				zIndex : 0
			}));

			var ai = Ti.UI.createActivityIndicator({
				style : Ti.UI.iPhone.ActivityIndicatorStyle.BIG,
				color : '#fff',
				zIndex : 100
			});
			container.add(ai);
			ai.show();
			ai = null;
		}

		container._isShowing = false;

		return container;
	};

	/* =PUBLIC API
	 --------------------------------------------------------------------------- */

	/* =|show(params)
	 *
	 * Shows the indicator
	 *
	 * Params:
	 * 	- params (Object):
	 * 		- message (String):
	 * 			Text message associated to the indicator
	 --------------------------------------------------------------------------- */
	ActivityIndicator.prototype.show = function(params) {
		if (this._isShowing) {
			return;
		}

		if (isAndroid()) {
			this.message = params.message;
		} else {
			this.children[1].message = params.message;
		}

		this._isShowing = true;
		this.show();
	};

	/* =|hide()
	 *
	 * Hides the indicator
	 --------------------------------------------------------------------------- */
	ActivityIndicator.prototype.hide = function() {
		if (this._isShowing) {
			this._isShowing = false;
			this.hide();
		}
	};

	/* =INTERNAL UTILS
	 --------------------------------------------------------------------------- */
	function isAndroid() {
		return Ti.Platform.osname.match(/android/g);
	}

	/* =EXPOSE OBJECT
	 --------------------------------------------------------------------------- */
	module.exports = ActivityIndicator;
})();