Ionic Timer

Ionic Timer

Highly customizable timers for your Ionic apps

$10.00

Not yet rated
Iclic Labs

Iclic Labs

Member since 2014

Details

Version:
1.0
Size:
1mb
Ionic:
1.x
Platforms:
iOS, Android, Windows Phone
View ID:
51b2e56d
Released:
4 years ago
Updated:
3 years ago
Category:
Plugins
Tags:
ionic, ion, timer, progress, bar

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

  1. Works with iOS, Android and Windows Phone.
  2. Works great for workout app, cooking app, etc
  3. Easy to include in your existing app.
  4. The directive is very easy to use.
  5. Compatible with your existing code.
  6. Comes with the full timer page example.
  7. This component has well structured html, css and js files and is heavily commented, so that it is easy to edit, add your style, etc.

Installation

  1. Copy the lib/ion-timer.js into your lib folder
  2. Update your index.html to include the lib/ion-timer.js file
  3. Update the app.js file and add dbaq.ionTimer to the list of modules, i.e. angular.module('starter', ['ionic', dbaq.ionTimer'])

That's all!

Usage

  1. in your view, you can add the directive anywhere:

     <ion-timer duration="duration" opts="ionTimerOpts"></timer>
  2. 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:

  1. Ionic Categories: Ionic v2.x/v3.x
  2. Ionic Passcode Square: Ionic v2.x/v3.x
  3. Ionic Passcode Flat: Ionic v2.x/v3.x
  4. Ionic Passcode Round: Ionic v2.x/v3.x
  5. Ionic Shrinking Header: Ionic v2.x/v3.x
  6. Ionic Material Sidemenu: Ionic v2.x/v3.x
  7. Ionic Walkthrough: Ionic v2.x/v3.x
  8. Ionic Contacts Inviter: Ionic v2.x/v3.x
  9. Ionic Cover Header: Ionic v1.x - Ionic v2.x/v3.x
  10. Ionic Profile Header: Ionic v2.x/v3.x
  11. Ionic Numeric Keyboard: Ionic v1.x - Ionic v2.x/v3.x
  12. Ionic Phone Number Validator: Ionic v1.x
  13. Ionic Cover Item: Ionic v1.x
  14. Ionic Timer: Ionic v1.x

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.

Tamer Sherif

Tamer Sherif   ·   4 years ago

Step1: in your view, you can add the directive anywhere: But you haven't posted the directive example itself

Tamer Sherif

Tamer Sherif   ·   4 years ago

I know it's there in the html file after you download but I think you missed it in the description

Iclic Labs

Iclic Labs   ·   4 years ago

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.

Noodlio

Noodlio   ·   4 years ago

Hi there. How can I contact you for some inquiries? Can't find your email! Thanks.

Iclic Labs

Iclic Labs   ·   4 years ago

For any inquiries, please contact me at icl1clabs@gmail.com. Thanks.

Orestis

Orestis   ·   2 years ago

Any chance on getting this work for ionic3?

  ·   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

Any chance on getting this work for ionic3?

  ·   just now

{{ reply.comment }}



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

Iclic Labs

Iclic Labs   ·   4 years ago

For any inquiries, please contact me at icl1clabs@gmail.com. Thanks.

Noodlio

Noodlio   ·   4 years ago

Hi there. How can I contact you for some inquiries? Can't find your email! Thanks.

Iclic Labs

Iclic Labs   ·   4 years ago

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.

Tamer Sherif

Tamer Sherif   ·   4 years ago

I know it's there in the html file after you download but I think you missed it in the description

Tamer Sherif

Tamer Sherif   ·   4 years ago

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.

There are no ratings for this plugin yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}