Alloy+Titanium widget to display a loader mask for you applications.
Latest commit 98b6774 Dec 9, 2015 @kopiro kopiro Merge pull request #2 from alangvara/master
FIX: deprecated property in sdk 5.1.0
Failed to load latest commit information.
controllers Use custom view Oct 17, 2015
styles FIX: deprecated property in sdk 5.1.0 Dec 9, 2015
views Use custom view Oct 17, 2015 Use custom view Oct 17, 2015
widget.json Use custom view Oct 17, 2015



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.