ng-bootstrap

Progress bar

Visualise progress with one or more <bs-progress-bar> children stacked inside a <bs-progress> host. Each bar accepts [minimum], [maximum] and [value], plus styling inputs such as [color], [striped] and [animated].

Basic usage

  
    
      
        <bs-progress>
        
    
      
          <bs-progress-bar [minimum]="0" [maximum]="100" [value]="50"></bs-progress-bar>
        
    
      
        </bs-progress>
        
    

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import {
        
    
      
          BsProgressComponent,
        
    
      
          BsProgressBarComponent,
        
    
      
        } from '@mintplayer/ng-bootstrap/progress-bar';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-progress-demo',
        
    
      
          templateUrl: './my-progress-demo.component.html',
        
    
      
          imports: [BsProgressComponent, BsProgressBarComponent],
        
    
      
        })
        
    
      
        export class MyProgressDemoComponent {}

Simple

  
    
      
        <bs-progress>
        
    
      
          <bs-progress-bar [minimum]="0" [maximum]="100" [value]="15"></bs-progress-bar>
        
    
      
        </bs-progress>

Striped

  
    
      
        <bs-progress>
        
    
      
          <bs-progress-bar
        
    
      
            [minimum]="0" [maximum]="100" [value]="30"
        
    
      
            color="warning"
        
    
      
            [striped]="true">
        
    
      
          </bs-progress-bar>
        
    
      
        </bs-progress>

Animated

  
    
      
        <bs-progress>
        
    
      
          <bs-progress-bar
        
    
      
            [minimum]="0" [maximum]="100" [value]="20"
        
    
      
            color="info"
        
    
      
            [striped]="true"
        
    
      
            [animated]="true">
        
    
      
          </bs-progress-bar>
        
    
      
        </bs-progress>

Stacked

  
    
      
        <!-- Multiple <bs-progress-bar> children render side-by-side. -->
        
    
      
        <bs-progress>
        
    
      
          <bs-progress-bar [minimum]="0" [maximum]="100" [value]="15"></bs-progress-bar>
        
    
      
          <bs-progress-bar [minimum]="0" [maximum]="100" [value]="30" color="warning" [striped]="true"></bs-progress-bar>
        
    
      
          <bs-progress-bar [minimum]="0" [maximum]="100" [value]="20" color="info"></bs-progress-bar>
        
    
      
        </bs-progress>

Infinite

  
    
      
        <!-- [isIndeterminate]="true" enables the marching-stripes loading look. -->
        
    
      
        <bs-progress [indeterminate]="true">
        
    
      
          <bs-progress-bar [minimum]="0" [maximum]="100" [value]="15"></bs-progress-bar>
        
    
      
          <bs-progress-bar [minimum]="0" [maximum]="100" [value]="30" color="warning" [striped]="true"></bs-progress-bar>
        
    
      
          <bs-progress-bar [minimum]="0" [maximum]="100" [value]="20" color="info" [striped]="true" [animated]="true"></bs-progress-bar>
        
    
      
        </bs-progress>