Skip to content
Alloy+Titanium widget to display a loader mask for you applications.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



Titanium Widget to display a loader mask.

Proudly inspired to, with some edits for Android (using ProgressIndicator instead Ti.UI.Window)



Via Gittio

gittio install com.caffeinalab.titanium.loader

Via Github

Download the latest release, and add in your config.json, under dependencies:

"dependencies": {
    "com.caffeinalab.titanium.loader": "*"

Fully stylable via TSS


The outer mask (Window)


The mask containing the loader


The label containing the text

Watch the window.tss/window.xml file for all options and override the rules with ID instead of class.


// Create a global reference to the widget
var LO = Alloy.createWidget('com.caffeinalab.titanium.loader', {
	message: "Test",
	cancelable: true,
	useImages: false

// show the loader

// Equivalent to { message: 'Loading...', messageRelevance: 1 }'Loading...');

// ... or Pass an object{
	message: 'Wait..',
	messageRelevance: 3,
	cancelable: true

// ... and optionally a complete callback, function() {
	alert('Ya Man!');

// hide the loader

Constructor and .show options

message (String)

The message to display

messageRelevance (Number, default: 0)

Continuous updates to the message will respect the messageRelevance property.

cancelable (Boolean, default: true)

If is a Function, this will be called on cancel.

Set to explicit false to prohibit user cancelation of the mask.

onInit (Function, default: null)

Function to call before the window appear, so you can edit UI.

e.ui will be current UI element, so be careful to switch between OSes.

customView (Ti.UI.View, default: null)

Use a custom view instead of default loader / image


.show([opt:Object], [callback:Function])

Show the mask extending the constructor options with the arguments.

.show([message:String], [callback:Function])

This is equivalent to show({ message: [message] })


Update the previous passed options and the UI.


Closes the mask.

You can’t perform that action at this time.