Circular count down timer

This library is a count down timer for Vue js framework. You can add as many as timers you need and fully customize them.

Installation

npm install vue-circular-count-down-timer

After installation, you can import component and register it in the main.js:

import Vue from 'vue';
import CircularCountDownTimer from 'vue-circular-count-down-timer';
Vue.use(CircularCountDownTimer);

Examples

You can see some sample implementations in this page. You can also check out the live demo in this link.

How to use

You should pass an array of circles configurations to the component as props. You can also pass circle's configs directly to the component in order to apply them to all circles.

Each circle must have an id, You should also determine id of main circle using main-circle-id props. This is the circle that counting starts with that.

Dependent circles

By default, circles are independent of each other, if you want to make them related (minutes, seconds, ... for example) you should set id of related circles in dependentCircles field of a circle.

Circles arrangement

By default, circles will be placed in a row (flex row), but if you want to change default arrangement, you can pass container-classes and circle-classes props and change their styles.

Stop conditions

If you want to stop counting after reaching a certain value, you can use stop-conditions props. It is an object that contains values for each circle. For example consider you have two circles with id circle-1 and circle-2, you want to stop counting when circle-1 reaches to 5 and circle-2 reaches to 12:

stop-conditions = { 'circle-1': 5, 'circle-2': 12 }

After finish counting, a finish event will be emitted.

Incremental or decremental

By default, counting is incremental, but if you want to make it counting downward, pass a negative value for stepLength field of circle.

Props

Circle props

events