ngx spinner

Introduction

Ngx spinner is an Angular component library for displaying a spinner animation while loading data or performing an action. It provides a variety of spinners with different configurations and can be customized with CSS.

This library is compatible with Angular 2+ and can be easily installed via npm.

Installation

To install ngx spinner, run the following command:

npm install ngx-spinner --save

Usage

To use ngx spinner in your Angular project, you need to import the NgxSpinnerModule in your app module:

import { NgxSpinnerModule } from 'ngx-spinner';
// ...

@NgModule({
  imports: [
    // ...
    NgxSpinnerModule,
  ],
  // ...
})
export class AppModule { }

After that, you can use the ngx-spinner component in your templates:

<ngx-spinner></ngx-spinner>

Additionally, you can configure the spinner with different options:

<ngx-spinner 
  bdColor="rgba(51, 51, 51, 0.8)" 
  size="medium" 
  type="ball-atom" 
  color="#fff">
</ngx-spinner>

Options

The ngx-spinner component supports the following options:

| Option | Type | Default Value | Description | |--------|------|---------------|-------------| | bdColor | string | rgba(51, 51, 51, 0.4) | The background color of the spinner | | size | string | medium | The size of the spinner. Possible values: small, medium, large | | type | string | line-scale-pulse-out-rapid | The type of spinner. Possible values: line-scale, line-scale-party, ball-pulse, ball-grid-pulse, ball-clip-rotate, ball-clip-rotate-pulse, square-spin, ball-clip-rotate-multiple, ball-pulse-rise, ball-rotate, cube-transition, ball-zig-zag, ball-zig-zag-deflect, ball-triangle-path, ball-scale, line-scale-party, ball-triangle-path, ball-scale-multiple, ball-beat, ball-scale-ripple, ball-scale-ripple-multiple, ball-spin-fade-loader, line-spin-fade-loader, triangle-skew-spin, pacman, semi-circle-spin, ball-grid-beat, ball-scale-random, line-scale-random, triangle-scale-out, triangle-scale-in, square-spin, timer | | color | string | #ffffff | The color of the spinner |

Conclusion

Ngx spinner is a great library for displaying a spinner animation in an Angular project. It provides many options for customization and is easy to install and use.