MultiColorProgressbar

Multi Color progress bar component that can be easily integrated into Angular applications to visualize progress in a visually appealing way. The component allows customization of colors and weighages to suit different use cases

Appearance

Installation

npm install multi-color-progressbar --save

Usage

Import in Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MultiColorProgressbarModule } from 'multi-color-progressbar';

@NgModule({
  imports: [
    BrowserModule,
    MultiColorProgressbarModule
  ],
  declarations: [YourComponent],
  bootstrap: [YourComponent]
})
export class YourModule { }

In Your Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  outerColorWeighage: { color: string; weighage: number }[] = [
    { color: '#D22B2B', weighage: 10 },
    { color: '#51DA67', weighage: 40 },
    { color: '#FFBF00', weighage: 50 },
  ];
}

In Your HTML

<lib-color-progress-bar [colorWeighage]="outerColorWeighage"></lib-color-progress-bar>

Now you're all set to use the MultiColorProgressbar component in your Angular application. Adjust the colorWeighage array as needed to customize the appearance of your progress bar.

Happy coding! 🚀