Angular 2+的圆形计数器组件

Angular 2+的圆形计数器组件
插件名称 angular-circle-counter
发布时间 2020年5月31日
插件作者 daverdalas

一个动画的,可自定义的,圆形的计数器/进度栏组件,用于Angular 2/4/5。

安装:

# NPM
$ npm install angular-circle-counter --save

使用

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

选项

参数 类型选项默认描述
fromnumber0起始号码
tonumber0完工编号
ofnumberSame as to例如100中的50-用于显示百分比
modestringonInit | viewport | manualonInit决定何时开始计数
animationTimenumber4000柜台时间
animationTypestringSee available names herelinear动画类型
showCirclebooleantrue/falsetrue确定圆的显示
circleColorstring#307bbb确定圆圈的颜色
fontSizenumber150操纵柜台的大小
delaynumber0倒数开始计时的延迟
(finished)event活动在倒数计时结束时发送
<ng-counter-suffix></ng-counter-suffix>
<ng-counter-prefix></ng-counter-prefix>
html在计数器编号之前或之后添加html代码
finishedTextstring添加文本以在计数完成后显示