Simple Circular Counter Component for Your Angular

Angular Circle Counter is a simple counter component and customizable round counter/progress bar element for the 2/4/5 angular.

angular svg round progressbar, ng circle progress angular 8, circular progress bar in angular material, angular circle progress bar, ng circle progress example, circle in angular

How to make use of it:


npm install angular-circle-counter --save
yarn add angular-circle-counter


Import CounterModule inside app.module.ts

import {CounterModule} from 'angular-circle-counter';
then add it to imports list:
imports: [

If you want to use counter text prefix or suffix
remember about adding CUSTOM_ELEMENTS_SCHEMA to module schemas:
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

<app-counter [from]=0 [to]=100 [of]=100></app-counter>



fromnumber0Starting number
tonumber0Finish number
ofnumberSame asĀ toE.g. 50 out of 100 – useful for displaying percentages
modestringonInit | viewport | manualonInitDecides when to start counting
animationTimenumber4000Time at which the counter is to take place
animationTypestringSee available namesĀ herelinearAnimation type
showCirclebooleantrue/falsetrueDetermines the display of the circle
circleColorstring#307bbbDetermines the color of the circle
fontSizenumber150Manipulates the size of the counter
delaynumber0Delay with which the countdown is to start
(finished)eventEvent sent at end of countdown
htmlAdd HTML code before or after a counter number
finishedTextstringAdd text to display after the counting is finished

Circular Counter Component For Angular, angular-circle-counter Plugin/Github, circle progress is not a known element, ng circle progress github

See Demo And Download

Official Website(daverdalas): Click Here

This superior jQuery/javascript plugin is developed by daverdalas. For extra advanced usage, please go to the official website.

Related Posts


A Simple Infinite Image Carousel Using Pure Javascript

simple infinite carousel, an extremely small, easy-to-use, and infinitely repetitive circular image slider created with regular JavaScript and CSS. Must Read: Flip Sliding Carousel Gallery Made Of…


A Vue3 Block Organization Tree View Component Library

Block tree is a simple organizational hierarchical horizontal or vertical tree view based on Vue3.x. It supports events, slots, horizontal visibility, and node processing. Thanks to hukaibaihu…


Front-End Image Preview For Mobile-Web Applications | imagePreview

Mobile JS photo preview plug-in supports rotation and zoom (two fingers / double click), and comfort and smoothness is the biggest pursuit. ImagePreview is an iOS-style, mobile-first,…


Simple And Powerful Fullscreen Lightbox Plugin | fslightbox

Fullscreen Lightbox Basic is a modern and handy plug-in for displaying photos and videos in a clean overlay box. Showcase a single source or create a great…


Create Data Flows with Drag And Drop Flowchart Builder | Drawflow

Flow diagram allows you to create data streams easily and quickly. Install a JavaScript library only and have four lines of code. Draw flow is a JavaScript…


[mdb-ui-kit] Latest Bootstrap 5 & Material Design 2.0 UI KIT

Bootstrap Material Design UI KIT – Build responsive mobile projects on the web using the world’s most popular material design front-end component library. This is a pure…