Press "Enter" to skip to content

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:

Installation

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

Usage

Import CounterModule inside app.module.ts

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

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';

schemas: [CUSTOM_ELEMENTS_SCHEMA],
<app-counter [from]=0 [to]=100 [of]=100></app-counter>

Options

ParameterTypeOptionsDefaultDescription

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
<ng-counter-suffix></ng-counter-suffix>
<ng-counter-prefix></ng-counter-prefix>
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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.