SJ Progress Bar

A fully dynamic progress bar for Angular applications.

Installation

npm install sj-progress-bar --save

Usage

Import the SJProgressBarModule.

import { SJProgressBarModule } from 'sj-progress-bar';
@NgModule({
  imports: [
    ...
    SJProgressBarModule
  ]
  ...
})
export class AppModule { }

Include sj-progress-bar in your component html file.

<sj-progress-bar></sj-progress-bar>

Customize the the sj-progress-bar for your application

You can use the following properties to customize the sj-progress-bar component in your template:

Options

| Option| Default | Values |Description | | ------------ | ------------| ------------| ------------ | | value | 0 | 0-100 |The value of the progress bar between 0-100. | | color | #1976d2 | Any color | The color of the progress bar. You can give any color of your choice| | stripes | false | true/false| It is a boolean value which can enable or disable the stripes animation | | showPercentage | false | true/false|This flag helps to hide and show the percentage value of the progress bar. | | percentagePosition | center | left/center/right |This attribute can positioning the pecentage value | | percentageColor| dark| dark/light| This can change the percentage color to dark or light|

Example:

<sj-progress-bar 
            [value]="100" 
            [stripes]="true" 
            color="blue" 
            [showPercentage]="true"
            percentagePosition="left"
></sj-progress-bar>

Demo

Simple examples using sj-progress-bar:

Online demo available here

Author

Shiljith Mp (Angular Developer)

License

MIT