Spinner

Lightweight loading indicator. Choose type="border" for the classic ring or type="grow" for a pulsing dot, give it a theme colour name with color, and small for the small size.

Basic usage

  
    
      
        <bs-spinner type="border" color="primary"></bs-spinner>
        
    
      
        <!-- Small, with your own status text for screen readers -->
        
    
      
        <bs-spinner [small]="true" label="Saving…"></bs-spinner>

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import { BsSpinnerComponent } from '@mintplayer/ng-bootstrap/spinner';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-spinner-demo',
        
    
      
          templateUrl: './my-spinner-demo.component.html',
        
    
      
          imports: [BsSpinnerComponent],
        
    
      
        })
        
    
      
        export class MySpinnerDemoComponent {}

Border

  
    
      
        <!-- Classic spinning ring -->
        
    
      
        <bs-spinner type="border" color="primary"></bs-spinner>
        
    
      
        <bs-spinner type="border" color="success"></bs-spinner>
        
    
      
        <bs-spinner type="border" color="danger"></bs-spinner>

Grow

  
    
      
        <!-- Pulsing dot -->
        
    
      
        <bs-spinner type="grow" color="primary"></bs-spinner>
        
    
      
        <bs-spinner type="grow" color="success"></bs-spinner>
        
    
      
        <bs-spinner type="grow" color="danger"></bs-spinner>