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. |

Support

Copyright

Copyright (c) 2022 Yaseen Alrefaee, contributors. Released under the MIT