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:

| Inputs | Default value | Description | | -------| --------------| ----------- | | value | 0 | Value of the progressbar | | roundValue | 0 | The number of decimal printed when the value is displayed | | max | 100 | Max value of the progressbar | | progressType | "none" | Define the text displayed inside the progressbar | | Config | new ProgressbarConfig() | Set multiple properties in one property | | color1 | 101 | Rate after which the class .color1 will be set to the progressbar | | color2 | 101 | Rate after which the class .color2 will be set to the progressbar | | color3 | 101 | Rate after which the class .color3 will be set to the progressbar |

3.2. Values of type ProgressType:

| Value | Description | | -------| ----------- | | none | Don't display any value | | percent | Display a the percent value (40%) | | percent-progressive | Display the percent value with text animation from current-percent-value to new-percent-value | | value | Display a the percent value (40 / 100) | | value-progressive | Display the value with text animation from current-value to new-value | | ng-content | Display the ng-content |

4. progressbar component

4.1. Small wiki

Inputs available for progress-container:

| Inputs | Default value | Description | | -------| --------------| ----------- | | step | 100 | How many ticks should be displayed when the progressbar has the class ".stepped". Step value will be *2 until it's > 3% | | force-step | step | How many ticks should be displayed when the progressbar has the class ".stepped". |

CSS classes for progress-container:

| Class | Description | | -------| ----------- | | .stepped | Prints a tick every step |

CSS classes for progressbar:

| Class | Description | | -------| ----------- | | .stripped | Add an animated background on the .progress element | | .no-animate | Keep the background from .stripped or .stripped-reverse, without any move | | .stripped-reverse | Add an animated background on the .progress element moving on the other side |

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

| Class | Description | | -------| ----------- | | .squared | Remove the border-radius on the element |

ng-content targets

| ng-content Select | Description | | -------| ----------- | | .pre-text | Add an text before the value displayed | | .text | Text displayed if progressType == ng-content |

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;
   }    

   ...
 }