Stylish Loader component for Titanium alloy

Stylish Loader component for Titanium alloy

Released 4 years ago , Last update 4 years ago

This component is a stylish loader template built using the Appcelerator Titanium mobile framework and test to deploy on iOS and Android devices. The package includes the source code, graphic assets and documentation.

This component is a stylish loader template built using the Appcelerator Titanium mobile framework. Customizable and easy to re-skin, this component can be easily integrated into your application to show a progress bar while a task is being completed.

This loader works on iPhone, iPad & Android.


  • Implemented with latest Titanium 3.X.
  • Tested on iOS & Android devices.
  • Integrate with a few lines of extra code.
  • Unique styles and animations.
  • Well-indented code and documentation.
  • Integrated with sounds effects and music.
  • Easily Customizable

YouTube videos are available for both the iOS version and Android version.


14 day 14-day money-back guarantee


Application License

  • Perpetual license

  • 1 application

  • Can distribute binary products only

  • Commercial use

  • 1 month support

Need custom services for this product? Get a quote


The loader is not the default appcelerator titanium loader controller, it is a custom one built with sliding views, circularProgressBar and animations.

The class is located in Controller/index.js. Below are the variables you can adjust:

outerCircle and innerCircle define the size of the outer and inner circle which displays the percentages.

sliderHeight define the height of the slider control ( you can play with 1 & 2 and make the UI and look exactly the way you want in the code )

circularProgressBar control the display of the progress bar. var upd = function() is called every 1 second and has all logic to move the loader in the right direction.

Sounds are played using default class Ti.Media.createSound

Setup / installation

Integrating this component into your application is simple and require only a few lines of code:

  • Copy and paste the code written in index.js
  • Import the file circularprogressbar.js .

To initialize the progress bar:

showSelectedSeconds = '60';  // Number of secs to complete 100%
circleProgress.left= '0%'; // Star  circular progress bar from  0%
bgSliderColor.left='0%'; // Star slider bar from 0%
setTimeout(upd,1000); // Start the timer every 1000 ms = 1 Sec

If you wish to play the sounds you can also use; and to stop the sound player.stop();

2 licenses, starting from From » $9.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

or Get a quote

for customization or integration services

Or enter your name and Email
No comments have been posted yet.