ngx-heyl-progressbar v3.3.0

ngx-heyl-progressbar

This package allows you to use a progressbar and a radial-progress element in AngularX (2+) projects.

Please don't hesitate to ask for new features or report a bug on Github! Thanks

You can see a Live example here

progressbar component example :

radial-progress component example :

1. Features :

• Progress bars
  • Multiple bars on the same container
  • Bootstrap's stripped skin
  • Steps visible with a vertical line
• Radial progress (v3)
  • Negative values handled (v3.2)
  • Can have a squared form (v3.2)
  • ng-content with selector (v3.1)
• Global
  • CSS transition on value change
  • CSS classes depending of the value (default, color[1-3])
  • Multiple way to display values (see ProgressType)
  • Text transition on value change (if change from 10 to 15, number will increase progressively)

2. Installation :

2.1 Install npm module :

npm install ngx-heyl-progressbar

2.2 Import the module :

Open your app.module.ts file and import the module like this :

import { ProgressbarModule } from "ngx-heyl-progressbar";
@NgModule({
   imports: [ 
      ...,
      ProgressbarModule
   ]
})

3. Small wiki

Know that ProgressbarComponent and RadialProgressComponent has the same super-class : AbstractProgressComponent. All inputs are declared inside this class.

3.1. Inputs available for AbstractProgressComponent:

3.2. Values of type ProgressType:

4. progressbar component

4.1. Small wiki

Inputs available for progress-container:

CSS classes for progress-container:

CSS classes for progressbar:

4.2. Then use <progressbar> component :

<progress-container>
    <progressbar [value]="'20'" [max]="'40'" class="stripped"></progressbar>
</progress-container>
<progress-container class="stepped" [step]="'10'">
    <progressbar [value]="'20'" class="stripped"></progressbar>
    <progressbar [value]="'50'" class="stripped-reverse"></progressbar>
</progress-container>

4.3. Styling progressbar component

You can declare the style you want for the progressbar. Here is an example :

 progress-container {
    /* background element */
    background-color: rgba(0, 0, 0, 0.4);   
 
    > .progressbar {
       color: #fff;
       
       &.default {
          /* Progress bar when the progress class is default */
          background-color: green;
       }

       &.color1 {
          /* Progress bar when the progress class is color1 */
          background-color: orange;
       }    
 
       ...
    }
 }

5. radial-progress component

5.1. Small wiki :

CSS classes for radial-progress

ng-content targets

5.2. Use <radial-progress> component :

 <radial-progress value="5" max="10" progressType="ng-content">
     <div class="text">50% | 5/10</div>
 </radial-progress>
 <radial-progress [value]="'7'" color1="33" color2="66" max="14" progressType="value-progressive">
    <div class="pre-text">Score :</div>
 </radial-progress>

5.3. Styling progressbar component

You can declare the style you want for the progressbar. Here is an example :

 radial-progress {
   &.default .fill {
      /* Progress when the progress class is default */
      background-color: green;
   }

   &.color1 .fill {
      /* Progress when the progress class is color1 */
      background-color: orange;
   }    

   ...
 }