index.xml
<Alloy>
<Window class="container">
<View id="backdrop"/>
<View id="container">
<ImageView id="loader"/>
<Label id="message" textid="Loading..."/>
</View>
</Window>
</Alloy>
index.js
$.loader.images = [
'/img/loading/load-cloud1.png',
'/img/loading/load-cloud2.png',
'/img/loading/load-cloud3.png',
'/img/loading/load-cloud4.png',
'/img/loading/load-cloud5.png',
'/img/loading/load-cloud6.png',
'/img/loading/load-cloud7.png',
'/img/loading/load-cloud8.png',
'/img/loading/load-cloud9.png'
];
$.start = function() {
$.loader.start();
};
$.stop = function() {
$.loader.stop();
};
$.setMessage = function(key) {
$.message.text = "Loading...";
};
$.start();
$.index.open();
index.tss
'#container': {
layout:'vertical',
height:Ti.UI.SIZE
},
'#backdrop': {
backgroundColor:'#232323',
opacity:0.75
},
'#loader': {
width:'75dp',
height:'46dp'
},
'#message': {
color:'#ebebeb',
textAlign:'center',
height:Ti.UI.SIZE,
width:Ti.UI.SIZE,
font: {
fontSize:'12dp',
fontWeight:'bold',
fontFamily : "PFDinDisplayPro-Regular"
}
}
All the images, pleases download from this dropbox link
https://dl.dropboxusercontent.com/u/72783403/loading.zip
Screen Shot :)
No comments:
Post a Comment