Dmitrijus
Sorry for the bad rating, didn't select anything and it defaulted to 0..
Ionic timer
Simple highly customizable timer to use in your apps
Free!
Marc Camp
Member since 2015
Details
Ionic timer
Ionic timer is a simple yet useful plugin that allows you to create timers in your ionic apps.
- Works with all the platforms that ionic supports
- Simple code
- Easy to include in your existing app
- Compatible with your existing code.
Details
This component has no directives. It uses a simple $timeout function for the timer and it has 4 easy functions that allow you to control it:
startTimerpauseTimerstopTimertimer-stopped(triggered, when the timer stops)
This component has well structured html, css and js files and is commented. It is easy to understand, edit and customize.
All the timers open in a modal for the demo, you can easily use them outside the modal with the same code provided inside it.
How does it work?
This component uses both Moment and angular-svg-round-progressbar. Take a look into these projects to know more about it.
This project already has all the moment files and angular-svg-round-progress files nedded to work. Plus its dependencies. Please check angular-svg-round-progressbar to know more about customization of the progress bar.
Download the project and see how it works!
Development
Made with love by the myBeweeg team
Free Software, Hell Yeah!
Hey there! You'll need to log in before you can leave a comment here.
JemliF
It seems not working when the remaining time is more that 24H, also, I'm wondering how to bring the progress out of the modal
Marc Camp
Hi @JemliF, that's true the timer is not working for more than 24 hours, the problem is that when I set the duration I use `var duration = moment().startOf('day').add(input, units);` and as you can see if the input is higher that 24h we get problems. I don't have time at the moment for solving it but feel free to try it and if you can work it out it would be great if you could share the answer with all of us. As for the timer outside the modal I've just created another codepen (you just had to call the function selectTimer() without the ng-click of the buttons and copy-paste the layout on the main screen). here it goes the pen http://codepen.io/comapedrosa/pen/ONYgzJ . Hope it helps!
Ehab Ahmed Abd El-Rehem
How can I use it for Ionic 2?
Marc Camp
I don't know, haven't tried ionic 2 yet. But I guess that there's no problem as far as putting all the js code on the component
Stephen
Great timer. Is it possible to presist the countdown when app is closed or phone locked?
Marc Camp
Hi Stephen, I haven't don it but if you look at the codepen you'll see a comment in there where I explain how to do it!
Stephen
Hi Marc, thanks for the quick reply. I had a look at the codepen but nothing stood out for me. Is it at the var mytimeout line?
Marc Camp
Stephen you misunderstood me maybe I didn't explain myself enough! By commenta I meant the ines on the codepen link here you have them http://codepen.io/comapedrosa/details/gPPwOv every codepen has a comments section working in the same way that this comment section on ionic market! Hope it helps now!
Gian Nicola
Hi! It's possible to use it witout a modal? Return this error on the frontend: 2016-11-14T00:00:00+01:00
Marc Camp
Yes it is possible, actually if u take a look at my codepen profile I have 2 examples of the timer one with modal and the other withoit it!
Gian Nicola
Great, but Inotice that you give the value manually... I need to pass the value from an array.
Rahul Gohate
5 star for this plugin. But there is one problem. When device locked, timer stop automatically. Can you suggest me how to solve it?
Steven Mellor
Any chance that you can upgrade this for ionic2/3?
Marc Camp
Hi Steven, not possible for the moment, my company still uses Ionic 1! Thx for your interest!
abdulrahman alyahya
Greetings, I'm new to ionic, could you please list the installation steps so I can install it into my project. thanks
Marc Camp
Hello, easiest thing to do is to takw a look at the CodePen (https://codepen.io/comapedrosa/pen/gPPwOv) and copy the code from there. Basically, you just have to install the 2 libraries mentioned Moment and angular-svg-round-progressbar and copy all the js code to your controller (no need to copy angular-svg-round-progressbar) since you will have it from the headers on your project. Hope it helps.
Diren Inderjeeth
As soon as I copy the JS code into my page controller, Ionic Serve just gives me a blank screen. I know it's difficult to determine without viewing the rest of my code but it is quite large. Any ideas on what is causing this or does anyone have similar examples of implementing this timer within an existing app i.e. not as the index.html file?
Diren Inderjeeth
Can someone please remove this, I have reposted my question as this did not show up earlier. Thanks
Diren Inderjeeth
Difficult to answer given the lack of information, but when I added the js to my app i get this error when running Uncaught SyntaxError: Unexpected token . apparently it is due to the app now returning index.html for all requests? any ideas on how to solve this, or does someone have a similar example of integrating this plugin into a pre-existing app.
Marc Camp
I have it in several places not just index.html look at my codepen profile and check both timer codepens, one within a modal and the other not. (https://codepen.io/comapedrosa/) maybe it helps!
Orestis
Update for ionic3? Who still uses ionic 1? :-)
Marc Camp
I still use it, for the moment no update for v3 but you can clone the project and do it! :)
Orestis
Update for ionic3? Who still uses ionic 1? :-)
Marc Camp
I still use it, for the moment no update for v3 but you can clone the project and do it! :)
Diren Inderjeeth
Difficult to answer given the lack of information, but when I added the js to my app i get this error when running Uncaught SyntaxError: Unexpected token . apparently it is due to the app now returning index.html for all requests? any ideas on how to solve this, or does someone have a similar example of integrating this plugin into a pre-existing app.
Marc Camp
I have it in several places not just index.html look at my codepen profile and check both timer codepens, one within a modal and the other not. (https://codepen.io/comapedrosa/) maybe it helps!
Diren Inderjeeth
As soon as I copy the JS code into my page controller, Ionic Serve just gives me a blank screen. I know it's difficult to determine without viewing the rest of my code but it is quite large. Any ideas on what is causing this or does anyone have similar examples of implementing this timer within an existing app i.e. not as the index.html file?
Diren Inderjeeth
Can someone please remove this, I have reposted my question as this did not show up earlier. Thanks
abdulrahman alyahya
Greetings, I'm new to ionic, could you please list the installation steps so I can install it into my project. thanks
Marc Camp
Hello, easiest thing to do is to takw a look at the CodePen (https://codepen.io/comapedrosa/pen/gPPwOv) and copy the code from there. Basically, you just have to install the 2 libraries mentioned Moment and angular-svg-round-progressbar and copy all the js code to your controller (no need to copy angular-svg-round-progressbar) since you will have it from the headers on your project. Hope it helps.
Steven Mellor
Any chance that you can upgrade this for ionic2/3?
Marc Camp
Hi Steven, not possible for the moment, my company still uses Ionic 1! Thx for your interest!
Rahul Gohate
5 star for this plugin. But there is one problem. When device locked, timer stop automatically. Can you suggest me how to solve it?
Stephen
Great timer. Is it possible to presist the countdown when app is closed or phone locked?
Marc Camp
Hi Stephen, I haven't don it but if you look at the codepen you'll see a comment in there where I explain how to do it!
Stephen
Hi Marc, thanks for the quick reply. I had a look at the codepen but nothing stood out for me. Is it at the var mytimeout line?
Marc Camp
Stephen you misunderstood me maybe I didn't explain myself enough! By commenta I meant the ines on the codepen link here you have them http://codepen.io/comapedrosa/details/gPPwOv every codepen has a comments section working in the same way that this comment section on ionic market! Hope it helps now!
Ehab Ahmed Abd El-Rehem
How can I use it for Ionic 2?
Marc Camp
I don't know, haven't tried ionic 2 yet. But I guess that there's no problem as far as putting all the js code on the component
Marc Camp
Hi @JemliF, that's true the timer is not working for more than 24 hours, the problem is that when I set the duration I use `var duration = moment().startOf('day').add(input, units);` and as you can see if the input is higher that 24h we get problems. I don't have time at the moment for solving it but feel free to try it and if you can work it out it would be great if you could share the answer with all of us. As for the timer outside the modal I've just created another codepen (you just had to call the function selectTimer() without the ng-click of the buttons and copy-paste the layout on the main screen). here it goes the pen http://codepen.io/comapedrosa/pen/ONYgzJ . Hope it helps!
JemliF
It seems not working when the remaining time is more that 24H, also, I'm wondering how to bring the progress out of the modal
Gian Nicola
Hi! It's possible to use it witout a modal? Return this error on the frontend: 2016-11-14T00:00:00+01:00
Marc Camp
Yes it is possible, actually if u take a look at my codepen profile I have 2 examples of the timer one with modal and the other withoit it!
Gian Nicola
Great, but Inotice that you give the value manually... I need to pass the value from an array.
Hey there! You'll need to log in before you can leave a rating here.
mateo
Very nice !
yuhwan kim
Great!
Dmitrijus
Simple and elegant!
pishao
love it
Stephen
Great simple timer
Esteban
Great work! Excelent!
{{ rating.comment }}
{{ rating.comment }}
Esteban
Great work! Excelent!
Stephen
Great simple timer
pishao
love it
Dmitrijus
Simple and elegant!
yuhwan kim
Great!
mateo
Very nice !