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

| Props | Description | Possible values | Default value | | --- | --- | --- | --- | | circles | A list of circles config objects | Circle | [] | | interval | Timer change interval in ms | A positive number | 1000 | | main-circle-id | Id of the circle that counting should start with that | A string | | | size | Width and height of circles in px | A positive number | Container size | | container-classes | A list of classes to set to circles container element | An array of strings | [] | | circle-classes | A list of classes to set to a circle element | An array of strings | [] | | stop-conditions | An object that contains values for each circle to stop timer after reaching to those values | An object with circle ids as key, and a number as value | {} | | trigger-update | Emit an event for each value change or not | A boolean | true | | stroke-width | Thickness of circle strokes in px | A positive number | 10 | | stroke-color | Circle stroke color | A color string | #9d989b | | underneath-stroke-color | Stroke color of empty parts of circles | A color string | #eee | | fill-color | Circle background color | A color string | #ffffff | | value-font-size | Font size of counter value in px | A positive number | 20 | | label-font-size | Font size of counter label in px | A positive number | 15 | | label-position | Position of counter label | bottom or top | bottom | | show-value | Whether to show counter value or not | A boolean | true |

Circle props

| Props | Description | Possible values | Default value | | --- | --- | --- | --- | | id | Id of circle | A string | | | classList | A list of classes to set to the circle element | An array of strings | [] | | startValue | The number to start counting from, after reaching to the en of circle | A number | zero | | value | Initial value of circle | A number | zero | | size | Width and height of circles in px | A positive number | Container size | | strokeWidth | Thickness of circle strokes in px | A positive number | 10 | | strokeColor | Circle stroke color | A color string | #9d989b | | underneathStrokeColor | Stroke color of empty parts of circle | A color string | #eee | | fillColor | Circle background color | A color string | #ffffff | | valueFontSize | Font size of counter value in px | A positive number | 20 | | labelFontSize | Position of counter label | A positive number | 15 | | steps | The number circle partitions | A positive number | | | stepLength | How many step should be passed in each move | A non zero number | 1 | | label | Label of circle | A string | | | labelPosition | Position of label | bottom or top | bottom | | showValue | Whether to show counter value or not | A boolean | true |

events

| Events | Description | | --- | --- | | finish | Fires when counter reaches to stop conditions. | | update | Fires on each counting. |