Ionic timer

Ionic timer

Simple highly customizable timer to use in your apps

Free!

(6)
Marc Camp

Marc Camp

Member since 2015

Details

Version:
0.1
Size:
6mb
Ionic:
1.0.1
Platforms:
iOS, Android, Windows Phone
Released:
4 years ago
Updated:
4 years ago
Category:
Plugins
Tags:
ionic, ion, timer, progress, bar, rounded

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:

  • startTimer
  • pauseTimer
  • stopTimer
  • timer-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.

Dmitrijus

Dmitrijus   ·   4 years ago

Sorry for the bad rating, didn't select anything and it defaulted to 0..

Marc Camp

Marc Camp   ·   4 years ago

@Dmitrijus don't worry I talked to the ionic team and they fixed it! Thx!

JemliF

JemliF   ·   4 years ago

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

Marc Camp   ·   4 years ago

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

Ehab Ahmed Abd El-Rehem   ·   3 years ago

How can I use it for Ionic 2?

Marc Camp

Marc Camp   ·   3 years ago

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

Ehab Ahmed Abd El-Rehem

Ehab Ahmed Abd El-Rehem   ·   3 years ago

Please till me if you did it, I tried more time and can not

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Stephen

Stephen   ·   3 years ago

Great timer. Is it possible to presist the countdown when app is closed or phone locked?

Marc Camp

Marc Camp   ·   3 years ago

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

Stephen   ·   3 years ago

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

Marc Camp   ·   3 years ago

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!

Stephen

Stephen   ·   3 years ago

Ah sweet, get ya now. Thanks so much for the help!!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Gian Nicola

Gian Nicola   ·   3 years ago

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

Marc Camp   ·   3 years ago

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

Gian Nicola   ·   3 years ago

Great, but Inotice that you give the value manually... I need to pass the value from an array.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Rahul Gohate

Rahul Gohate   ·   3 years ago

5 star for this plugin. But there is one problem. When device locked, timer stop automatically. Can you suggest me how to solve it?

Marc Camp

Marc Camp   ·   3 years ago

Hi Raul look at the answer I gave to Stephen a few daya ago! Hope it helps!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Steven Mellor

Steven Mellor   ·   3 years ago

Any chance that you can upgrade this for ionic2/3?

Marc Camp

Marc Camp   ·   3 years ago

Hi Steven, not possible for the moment, my company still uses Ionic 1! Thx for your interest!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

abdulrahman alyahya

abdulrahman alyahya   ·   3 years ago

Greetings, I'm new to ionic, could you please list the installation steps so I can install it into my project. thanks

Marc Camp

Marc Camp   ·   3 years ago

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.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Diren Inderjeeth

Diren Inderjeeth   ·   3 years ago

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

Diren Inderjeeth   ·   3 years ago

Can someone please remove this, I have reposted my question as this did not show up earlier. Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Diren Inderjeeth

Diren Inderjeeth   ·   3 years ago

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

Marc Camp   ·   3 years ago

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!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Orestis

Orestis   ·   2 years ago

Update for ionic3? Who still uses ionic 1? :-)

Marc Camp

Marc Camp   ·   2 years ago

I still use it, for the moment no update for v3 but you can clone the project and do it! :)

Oshadhi

Oshadhi   ·   a year ago

Hey how to code using typescript and js?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Orestis

Orestis   ·   2 years ago

Update for ionic3? Who still uses ionic 1? :-)

Marc Camp

Marc Camp   ·   2 years ago

I still use it, for the moment no update for v3 but you can clone the project and do it! :)

Oshadhi

Oshadhi   ·   a year ago

Hey how to code using typescript and js?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Diren Inderjeeth

Diren Inderjeeth   ·   3 years ago

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

Marc Camp   ·   3 years ago

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!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Diren Inderjeeth

Diren Inderjeeth   ·   3 years ago

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

Diren Inderjeeth   ·   3 years ago

Can someone please remove this, I have reposted my question as this did not show up earlier. Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

abdulrahman alyahya

abdulrahman alyahya   ·   3 years ago

Greetings, I'm new to ionic, could you please list the installation steps so I can install it into my project. thanks

Marc Camp

Marc Camp   ·   3 years ago

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.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Steven Mellor

Steven Mellor   ·   3 years ago

Any chance that you can upgrade this for ionic2/3?

Marc Camp

Marc Camp   ·   3 years ago

Hi Steven, not possible for the moment, my company still uses Ionic 1! Thx for your interest!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Rahul Gohate

Rahul Gohate   ·   3 years ago

5 star for this plugin. But there is one problem. When device locked, timer stop automatically. Can you suggest me how to solve it?

Marc Camp

Marc Camp   ·   3 years ago

Hi Raul look at the answer I gave to Stephen a few daya ago! Hope it helps!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Marc Camp

Marc Camp   ·   4 years ago

@Dmitrijus don't worry I talked to the ionic team and they fixed it! Thx!

Stephen

Stephen   ·   3 years ago

Great timer. Is it possible to presist the countdown when app is closed or phone locked?

Marc Camp

Marc Camp   ·   3 years ago

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

Stephen   ·   3 years ago

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

Marc Camp   ·   3 years ago

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!

Stephen

Stephen   ·   3 years ago

Ah sweet, get ya now. Thanks so much for the help!!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Ehab Ahmed Abd El-Rehem

Ehab Ahmed Abd El-Rehem   ·   3 years ago

How can I use it for Ionic 2?

Marc Camp

Marc Camp   ·   3 years ago

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

Ehab Ahmed Abd El-Rehem

Ehab Ahmed Abd El-Rehem   ·   3 years ago

Please till me if you did it, I tried more time and can not

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Marc Camp

Marc Camp   ·   4 years ago

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

JemliF   ·   4 years ago

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

Dmitrijus

Dmitrijus   ·   4 years ago

Sorry for the bad rating, didn't select anything and it defaulted to 0..

Gian Nicola

Gian Nicola   ·   3 years ago

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

Marc Camp   ·   3 years ago

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

Gian Nicola   ·   3 years ago

Great, but Inotice that you give the value manually... I need to pass the value from an array.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in before you can leave a rating here.

mateo   ·     ·   4 years ago

Very nice !

yuhwan kim   ·     ·   4 years ago

Great!

Dmitrijus   ·     ·   4 years ago

Simple and elegant!

pishao   ·     ·   4 years ago

love it

Stephen   ·     ·   3 years ago

Great simple timer

Esteban   ·     ·   3 years ago

Great work! Excelent!

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Esteban    ·     ·   3 years ago

Great work! Excelent!

Stephen    ·     ·   3 years ago

Great simple timer

pishao    ·     ·   4 years ago

love it

Dmitrijus    ·     ·   4 years ago

Simple and elegant!

yuhwan kim    ·     ·   4 years ago

Great!

mateo    ·     ·   4 years ago

Very nice !