ng-circle-countdown

Angular circle countdown (NgCircleCountdown)

An Angular package for displaying a circle countdown fully configurable.

Compatibility:

Angular
16.x.x
17.x.x
18.x.x
19.x.x
20.x.x

Installation

Install This Library

$ npm install ng-circle-countdown --save

Install This Library

To prevent timer from tab throttling, install the peer dependancy worker-timers :

$ npm install worker-timers --save

Usage

Import

Add CircleCountdownModule to your module file:

imports: [CircleCountdownModule];

You can use it by this way:

<div class="counter-container">
    <ng-circle-countdown
        #timer_color
        [duration]="10000"
        [colors]="[ '#004777', '#F7B801', '#A30000', '#A30000' ]"
        [colorsTime]="[ 7, 5, 2, 0 ]">
        <ng-template #counter let-counter>
            <span class="remaining-time" [style.color]="counter.color">{{counter.value}}</span>
        </ng-template>
    </ng-circle-countdown>
</div>

To catch the onComplete countDown event, you have to import the CountdownService and use a compute on the isCompleted property:

public isCompleted: Signal
<boolean> = computed(() => this.countDown().isCompleted);

You can choose to use a formControl or just a formControlName. It depends on your needs.

Options

Options	Type	Default	Description
duration	number	0	Countdown duration (in ms)
color	string	#004777	Primary color for the countdown displaying
colors	<string>[]	[]	Colors (HEX format) for the countdown displaying if you want to insert a gradient
colorsTime	number[]	[]	Time interval(in s) to determine when the countdown should change color
strokeWidth	number	6	Line thickness countdown
size	number	None	Define the component size to match with your UI
rotation	RotationType	clockwise	Direction of the countdown rotation

You can choose to set only one color to the countdown, so you just have to set the color property.

If you want to generate a gradient color, then set the colors array with the colors you want to display.
You also have to set colorsTime array property to configure the color change moment.