NgxI24ProgressBarLib
A lightweight plugin to render a simple, animated progress bar.
Features
- highly customizable
- very easy to implement
Demo
Get started
Installation
$ npm i ngx-i24-progress-bar@latest
Example
TS
Module
import { NgxI24ProgressBarModule } from 'ngx-i24-progress-bar';
@NgModule({
declarations: [ AppComponent ],
imports: [BrowserModule, NgxI24ProgressBarModule ],
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 {
percentage = 89;
text = 'HTML';
}HTML
<ngx-i24-progress-bar [percentage]="percentage" [text]="text" ></ngx-i24-progress-bar>Options
| Property (Type) | Default | Description |
|---|---|---|
| percentage | 0 | The percent value 0 - 100
|
| text | HTML | The text value |
| textColor | '#222' | The text color |
| percentageRadius | '3px' | The border radius |
| percentageHeight | '8px' | The height of percentage |
| percentageColor | '#222' | The color of percentage text |
| progressBackColor | '#eee' | The border radius |
| progressColor | '#e91e63' | The border radius |
| spaceBetween | '10px' | The space between the text and the progress |
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