NgxI24ProgressBarLib

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

Features

• highly customizable
• very easy to implement

Demo

• Link

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