/ngx-spin

Primary LanguageSCSSMIT LicenseMIT

ngx-spin


A spinner for displaying loading state of a page or a section.

When To Use

When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.

Table of contents

Getting started

1. Install ngx-spin:

  npm install ngx-spin --save

2. Import the installed libraries:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { NgxSpinModule } from 'ngx-spin';

import { AppComponent } from './app';

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

3. Include ngx-spin in your app component:

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    ...
    <ngx-spin [simple]="true"></ngx-spin>
  `,
})
export class AppComponent {}

Examples

Basic usage

A simple loading status.

import { Component } from '@angular/core';

@Component({
    selector: 'demo-spin-basic',
    template: ` <ngx-spin [simple]="true"></ngx-spin> `,
})
export class DemoSpinBasicComponent {}

Inside a container

Spin in a container.

import { Component } from '@angular/core';

@Component({
    selector: 'demo-spin-inside',
    template: `
        <div class="example">
            <ngx-spin [simple]="true"></ngx-spin>
        </div>
    `,
    styles: [
        `
            .example {
                text-align: center;
                background: rgba(0, 0, 0, 0.05);
                border-radius: 4px;
                margin-bottom: 20px;
                padding: 30px 50px;
                margin: 20px 0;
            }
        `,
    ],
})
export class DemoSpinInsideComponent {}

Custom spinning indicator

Use custom loading indicator.

import { Component } from '@angular/core';

@Component({
    selector: 'demo-spin-custom-indicator',
    template: `
        <ng-template #indicatorTemplate><i class="fas fa-spinner"></i></ng-template>
        <ngx-spin [simple]="true" [indicator]="indicatorTemplate"> </ngx-spin>
    `,
    styles: [
        `
            i {
                font-size: 24px;
            }
        `,
    ],
})
export class DemoSpinCustomIndicatorComponent {}

Delay & Embedded mode

Specifies a delay for loading state. If spinning ends during delay, loading status won't appear.

Embedding content into ngx-spin will alter it into loading state.

import { Component } from '@angular/core';

@Component({
    selector: 'demo-spin-delay-and-debounce',
    template: `
        <ngx-spin [spinning]="isSpinning" [delay]="500">
            <div class="example">Something here</div>
        </ngx-spin>
    `,
    styles: [
        `
            .example {
                text-align: center;
                height: 100px;
                width: 100%;
                background: rgba(0, 0, 0, 0.05);
                border-radius: 4px;
                padding: 40px 20px;
            }
        `,
    ],
})
export class DemoSpinDelayAndDebounceComponent {
    isSpinning = true;
}

API

Selector: <ngx-spin></ngx-spin>

Property Description Type Default Value
[delay] specifies a delay in milliseconds for loading state (prevent flush), unit: milliseconds number -
[duration] specifies a duration in milliseconds, if set 1000ms loading indicator will show for at least 1 second to prevent screen flash, unit: milliseconds number 100ms
[indicator] the spinning indicator TemplateRef<void> -
[size] size of Spin 'large' | 'small' | 'default' 'default'
[spinning] whether Spin is spinning boolean true
[simple] whether Spin has no children boolean false

Build

Run npm run build:lib to build the project. The build artifacts will be stored in the dist/ directory.