ti.circularprogress
Circular progress view for Titanium. Using https://github.com/kaandedeoglu/KDCircularProgress (iOS) and https://github.com/owl-93/Determinate-Progress-View/ (Android).
Demo
Installation
- Download module
- add
<module>ti.circularprogress</module>totiapp.xml
Android
Add this to your build.gralde:
repositories {
maven { url 'https://jitpack.io' }
}
and you have to target min 22 in your tiapp.xml:
<uses-sdk android:minSdkVersion="22" />
Example
🙂
Alloy
<CircularProgress module="ti.circularprogress"/>
Classic
var cirularProgressModule = require("ti.circularprogress");
var win = Ti.UI.createWindow({backgroundColor: '#fff'});
var btn = Ti.UI.createButton({title: "animate from 0", bottom: 50});
var btn2 = Ti.UI.createButton({title: "set random value", bottom: 100});
var btn3 = Ti.UI.createButton({title: "change track", bottom: 150});
var lbl = Ti.UI.createLabel({
color: '#bbffffff', width: Ti.UI.SIZE,height: Ti.UI.SIZE, textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
font: { fontFamily: 'Arial', fontSize: 44, fontWeight: 'bold' },
shadowColor: '#77000000', shadowRadius: 4, shadowOffset: {x: 1, y: 1}, text: ''
});
var circularProgessView = cirularProgressModule.createCircularProgress({
height: 200,
width: 200,
trackColor: '#777',
progressColor: ['#f00', "#ff0"],
roundedCorners: false,
progressWidth: 20,
trackWidth: 10,
duration: 150,
progressValue: 10,
gradientRotateSpeed: 1.0,
glowAmount: 0.2,
startingAngle: 90
});
circularProgessView.addEventListener('done', function() {
console.log("reached end value");
lbl.text = circularProgessView.progressValue + "%";
});
circularProgessView.addEventListener('progress', function(e) {
console.log("progress: ", e.progress);
lbl.text = Math.round(e.progress) + "%";
});
btn.addEventListener("click", function() {
circularProgessView.animateProgress({
startValue: 0,
endValue: 100,
duration: 2000
});
})
btn2.addEventListener("click", function() {
var rnd = Math.round(Math.random() * 100);
circularProgessView.progressValue = rnd;
lbl.text = rnd + "%";
})
btn3.addEventListener("click", function() {
circularProgessView.trackWidth = Math.round(Math.random() * 10) + 10;
circularProgessView.progressWidth = Math.round(Math.random() * 10) + 10;
circularProgessView.roundedCorners = circularProgessView.roundedCorners == true ? circularProgessView.roundedCorners = false : circularProgessView.roundedCorners = true;
console.log("trackWidth: ", circularProgessView.trackWidth);
console.log("progressWidth: ", circularProgessView.progressWidth);
console.log("roundedCorners: ", circularProgessView.roundedCorners);
})
win.add([circularProgessView, btn, btn2, btn3, lbl])
win.open();
Properties
trackColor- background track colorprogressColor- color of the progress bar. String or array["start", "middle", "end"]for gradientroundedCorners- boolean. flat or rounded cornersprogressWidth- width of the progress bartrackWidth- width of the background trackduration- duration for animation. If 0progressValuewon't animate a changeprogressValue- current value of the progressbar (0 - 100)startingAngle- zero position (default top) (0-359)
Events
progress- returns event.progressdone- value is set or animation is done
Methods
animateProgress({startValue, endValue, duration})
Authors
- Marc Bender (@mbender74)
- Michael Gangolf (@MichaelGangolf / Web)
8 May 7, 2022
10 Nov 11, 2022
5 Nov 28, 2021
12 Sep 15, 2022
520 Jan 3, 2023
2.4k Jan 6, 2023
8 May 16, 2022
137 Nov 11, 2022
5 Nov 4, 2022
304 Dec 1, 2022
2 Aug 31, 2022
2 May 21, 2022
31 Mar 10, 2021
3.4k Dec 29, 2022
716 Dec 5, 2022
5 Dec 9, 2022
8 Sep 22, 2022
8 May 7, 2022
10 Nov 11, 2022
41 Dec 20, 2022
184 Dec 27, 2022
0 Dec 6, 2021
29 Jul 28, 2022
6 Jan 14, 2022
0 Oct 27, 2021