Ngx-i24-circular-progress NPM

NgxI24CircularProgress

A lightweight plugin to render a simple, animated circular progress bar.

Features

highly customizable
very easy to implement

Demo

Link

Get started

Installation

$ npm i ngx-i24-circular-progress@latest

Example

TS

Module

import { NgxI24CircularProgressModule } from 'ngx-i24-circular-progress';
@NgModule({
  declarations: [ AppComponent ],
  imports: [BrowserModule, NgxI24CircularProgressModule  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component

import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent {
 option = {
   primaryColor: '#0495fc',
   secondaryColor: '#191919',
   percentColor: '#fff',
   textColor: '#ffffffbf',
   text: 'html',
   circleRadius: 70
 };
 number = 75;
}

HTML

<ngx-i24-circular-progress [option]="option" [number]="number"></ngx-i24-circular-progress>

Options

Property (Type)	Default	Description
number	0	The percent value
option -> primaryColor	#0495fc	The color of the active bar
option -> secondaryColor	#191919	The color of the inactive bar
option -> strokeWidth	2	The stroke width of the circle
option -> dotWidth	5	The width and the height of the dot
option -> numberColor	#000	The color of the number
option -> percentColor	#000	The color of the percent sign
option -> textColor	#000000bf	The color of the text
option -> numberFontSize	'2.5em'	The font size of the number
option -> percentFontSize	'0.5em'	The font size of the percent sign
option -> textFontSize	'0.75em'	The font size of the text
option -> percent	50	The value must be between `0 - 100`
option -> text	'css'	-
option -> circleRadius	70	The radius of the circle
option -> spaceBetweenNumberPercent	3px	The space between number and percent sign

Other Projects

Name	Link	Description
ngx-i24-circular-progress	Link	A lightweight plugin to render a simple, animated circular progress bar.
ngx-i24-progress-bar	Link	A lightweight plugin to render a simple, animated progress bar.
ngx-weekday-picker	Link	Lightweight plugin to a pick weekday.
ngx-i24-color-picker	Link	A lightweight plugin to pick a color.
ngx-i24-checkbox	Link	A lightweight plugin to display a modern checkbox.