Tamer Sherif
Step1: in your view, you can add the directive anywhere: But you haven't posted the directive example itself
Highly customizable timers for your Ionic apps
Thanks to all of you who have downloaded this plugin! Please consider leaving a rating and review, it would be really helpful to get your feedbacks. Thanks.
Plugin by icliclabs.com
Description
Ionic Timer is a gorgeous component allowing you to add amazing and highly configurable timers to your Ionic apps.
Test Before You Buy
You can test the app using Ionic View and enter the app id 51b2e56d.
Features
Installation
That's all!
Usage
in your view, you can add the directive anywhere:
<ion-timer duration="duration" opts="ionTimerOpts"></timer>
here is a full example of the controller:
$scope.duration = 10; //duration in seconds
$scope.ionTimerOpts = {
autoStart: true, //if true, the timer will start automatically, false otherwise
progressCircle: {
strokeColor: '#45ccce', //the color of the progress circle
strokeWidth: 8, //the width of the progress circle
backgroundColor: '#eaeaea', //the background color of the progress circle
radius: 100, // radius of the circle, since the circle is responsive, this option can be override in order to make the circle fit in its parent. The radius to stroke ratio won't change.
rounded: true, // true to use `round` for the stroke-line-cap properties, false to use `butt`
clockwise: false // direction
},
text: {
color: '#45ccce',
size: '50px'
},
events: {
onComplete: function() {
console.log('completed');
},
onStart: function() {
console.log('started');
},
onPause: function(remainingSeconds) {
console.log('paused at ' + remainingSeconds);
},
onStop: function(remainingSeconds) {
console.log('stopped at ' + remainingSeconds);
}
}
};
// Additionally, you can control the timer via a simple API
$scope.ionTimerOpts.controls.status();
//returns STARTED/PAUSED/STOPPED
$scope.ionTimerOpts.controls.start(); //starts the timer
$scope.ionTimerOpts.controls.pause(); //pauses the timer
$scope.ionTimerOpts.controls.stop(); //stops and reinits the timer
// To increase the duration, simply update the duration
$scope.duration += 30; //+30 seconds
This component is structured, easy to customize and integrate into your Ionic app, BUT feel free to email me if you need any help.
Other Popular Plugins:
Need Custom Work?
If you need help with your Ionic apps, if you need a specific plugin or integration. Let's get in touch. I'll be glad to develop or advise you for your app! Email me at icl1clabs@gmail.com.
Hey there! You'll need to log in before you can leave a comment here.
Step1: in your view, you can add the directive anywhere: But you haven't posted the directive example itself
I know it's there in the html file after you download but I think you missed it in the description
Thanks for pointing this out. I will update the listing. If you need help using the plugin, feel free to email me at didier.baquier [at] gmail.com. Cheers.
Hi there. How can I contact you for some inquiries? Can't find your email! Thanks.
For any inquiries, please contact me at icl1clabs@gmail.com. Thanks.
Any chance on getting this work for ionic3?
Any chance on getting this work for ionic3?
For any inquiries, please contact me at icl1clabs@gmail.com. Thanks.
Hi there. How can I contact you for some inquiries? Can't find your email! Thanks.
Thanks for pointing this out. I will update the listing. If you need help using the plugin, feel free to email me at didier.baquier [at] gmail.com. Cheers.
I know it's there in the html file after you download but I think you missed it in the description
Step1: in your view, you can add the directive anywhere: But you haven't posted the directive example itself
Hey there! You'll need to log in and purchase the add-on before you can leave a rating here.
{{ rating.comment }}
{{ rating.comment }}