Advanced Search

Titanium Mobile: Circular Progress Bar

/ Published in: JavaScript
Save to your folder(s)
- I have not tested on android
- This is not animated as I did not need it for my needs. To make it animated, look at the second to last line in the function `layer3.transform = Ti.UI.create2DMatrix().rotate(angle);` You should be able to animate the rotation angle.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. var win = Ti.UI.createWindow({
  2. 	width:'100%',
  3. 	height:'100%'
  4. });
  5. win.open();
  6.  
  7. function circularProgressBar(options)
  8. {
  9. 	var opts = options;
  10. 	if (opts.percent == null || opts.percent > 1 || opts.percent < 0) opts.percent = 1;
  11. 	if (opts.size == null) opts.size = 46;
  12. 	if (opts.margin == null) opts.margin = 4;
  13. 	if (opts.backgroundColor == null) opts.backgroundColor = '#fff';
  14. 	if (opts.progressColor == null) opts.progressColor = '#4ba818';
  15. 	if (opts.topper == null) opts.topper = {};
  16. 	if (opts.topper.color == null) opts.topper.color = '#fff';
  17. 	if (opts.topper.size == null) opts.topper.size = 36;
  18. 	if (opts.font == null) opts.font = {};
  19. 	if (opts.font.visible == null) opts.font.visible = true;
  20. 	if (opts.font.size == null) opts.font.size = 12;
  21. 	if (opts.font.color == null) opts.font.color = '#900';
  22. 	if (opts.font.shadowColor == null) opts.font.shadowColor = '#aaa';
  23. 	if (opts.font.shadowRadius == null) opts.font.shadowRadius = 1;
  24. 	if (opts.font.shadowOffset == null) opts.font.shadowOffset = {};
  25. 	if (opts.font.shadowOffset.x == null) opts.font.shadowOffset.x = 0;
  26. 	if (opts.font.shadowOffset.y == null) opts.font.shadowOffset.y = 1;
  27.  
  28. 	var mainHolder = Ti.UI.createView({
  29. 		left: options.left,
  30. 		right: options.right,
  31. 		top: options.top,
  32. 		bottom: options.bottom,
  33. 		width: opts.size + opts.margin,
  34. 		height: opts.size + opts.margin,
  35. 		borderRadius: (opts.size + opts.margin) / 2,
  36. 		backgroundColor: opts.backgroundColor
  37. 	});
  38.  
  39. 	var holder = Ti.UI.createView({
  40. 		width: opts.size,
  41. 		height: opts.size,
  42. 		borderRadius: opts.size / 2
  43. 	});
  44.  
  45.  
  46. 	var layer1 = Ti.UI.createView({
  47. 	    width: opts.size,
  48. 	    height: opts.size,
  49. 	    borderRadius: opts.size / 2,
  50. 	    backgroundColor: opts.progressColor
  51. 	});
  52.  
  53. 	var layer2 = Ti.UI.createView({
  54. 		left: 0,
  55. 		width: opts.size / 2,
  56. 		height: opts.size,
  57. 		anchorPoint: {
  58. 			x: 1,
  59. 			y: 0.5
  60. 		},
  61. 		backgroundColor: opts.backgroundColor
  62. 	});
  63.  
  64. 	var layer3 = Ti.UI.createView({
  65. 		right: 0,
  66. 		width: opts.size / 2,
  67. 		height: opts.size,
  68. 		anchorPoint: {
  69. 			x: 0,
  70. 			y: 0.5
  71. 		},
  72. 		backgroundColor: opts.backgroundColor
  73. 	});
  74.  
  75. 	var layer4 = Ti.UI.createView({
  76. 		right: 0,
  77. 		width: opts.size / 2,
  78. 		height: opts.size,
  79. 		anchorPoint: {
  80. 			x: 0,
  81. 			y: 0.5
  82. 		},
  83. 		backgroundColor: opts.progressColor
  84. 	});
  85.  
  86. 	var topper = Ti.UI.createView({
  87. 		width: opts.topper.size,
  88. 		height: opts.topper.size,
  89. 		borderRadius: opts.topper.size / 2,
  90. 		backgroundColor: opts.topper.color
  91. 	});
  92.  
  93. 	var percentText = Ti.UI.createLabel({
  94. 		visible: opts.font.visible,
  95. 		width: Ti.UI.SIZE,
  96. 		height: Ti.UI.SIZE,
  97. 		color: opts.font.color,
  98. 		font: {
  99. 			fontSize:opts.font.size
  100. 		},
  101. 		shadowColor: opts.font.shadowColor,
  102. 		shadowRadius: opts.font.shadowRadius,
  103. 		shadowOffset: {
  104. 			x: opts.font.shadowOffset.x,
  105. 			y: opts.font.shadowOffset.y
  106. 		},
  107. 		textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
  108. 		text: (opts.percent * 100) + '%'
  109. 	});
  110.  
  111. 	mainHolder.add(holder);
  112. 	topper.add(percentText);	
  113. 	holder.add(layer1);
  114. 	holder.add(layer2);
  115. 	holder.add(layer3);
  116. 	holder.add(layer4);
  117. 	holder.add(topper);
  118.  
  119. 	var percent = opts.percent;
  120. 	var angle = 360 * percent;
  121. 	layer2.visible = (angle > 180) ? false : true;
  122. 	layer4.visible = (angle > 180) ? true : false;
  123. 	layer3.transform = Ti.UI.create2DMatrix().rotate(angle);
  124. 	return mainHolder;	
  125. }
  126.  
  127. /* Circular Progress Bar Options
  128.  
  129.  percent: A value between 0 and 1
  130.  size: The size of the circular progress bar
  131.  margin: The margin of the circular progress bar
  132.  backgroundColor: The backgroundColor of the circular area
  133.  progressColor: The backgroundColor of the progress bar
  134.  --
  135.  topper.color: The center circle color
  136.  topper.size: The size of the center circle
  137.  ---
  138.  font.visible: Boolean to display the font or not
  139.  font.color: The font color
  140.  font.size: The fontSize
  141.  font.shadowColor: The font shadow color
  142.  font.shadowRadius: The font shadow radius
  143.  font.shadowOffset.x: The x value of the shadow shadowOffset
  144.  font.shadowOffset.y: The y value of the shadow shadowOffset
  145.  
  146.  */
  147. var circleProgress = circularProgressBar({
  148. 	percent:0.35,
  149. 	size:46,
  150. 	margin:4,
  151. 	backgroundColor:'#fff',
  152. 	progressColor:'#4ba818',
  153. 	topper: {
  154. 		color:'#fff',
  155. 		size: 36
  156. 	},
  157. 	font: {
  158. 		visible: true,
  159. 		color: '#900',
  160. 		size: 12,
  161. 		shadowColor: '#aaa',
  162. 		shadowRadius: 1,
  163. 		shadowOffset: {
  164. 			x: 0,
  165. 			y: 1
  166. 		}
  167. 	}
  168. });
  169. win.add(circleProgress);

URL: http://developer.appcelerator.com/question/154274/is-there-a-way-to-create-circular-progress-bar#comment-201761

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.