Need private packages and team management tools?Check out npm Teams »

ng2-al-slim-bar

0.0.4 • Public • Published

a slim loading bar that works with Angular 7,8,9+

Angular component that shows slim loading bar at the top of the page of your application. a fork of ng2-slim-loading-bar

Installation

npm install ng2-al-slim-bar
 
or
 
yarn add ng2-al-slim-bar

Demo

https://angular-wytxgs.stackblitz.io

Usage

1. Update the markup

  • Import the style.css file into your web page
  • Add <ng2-slim-loading-bar></ng2-slim-loading-bar> tag in template of your application component.

2. Import the SlimLoadingBarModule

Import SlimLoadingBarModule.forRoot() in the NgModule of your application. The forRoot method is a convention for modules that provide a singleton service.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { SlimLoadingBarModule } from "ng2-al-slim-bar";
 
@NgModule({
  imports: [BrowserModule, SlimLoadingBarModule.forRoot()],
  bootstrap: [AppComponent]
})
export class AppModule {}
@NgModule({
  imports: [BrowserModule, SlimLoadingBarModule.forRoot()],
  exports: [BrowserModule, SlimLoadingBarModule]
})
export class SharedModule {}

3. Use the SlimLoadingBarService for your application

  • Import SlimLoadingBarService from ng2-slim-loading-bar in your application code:
import {Component} from '@angular/core';
import {SlimLoadingBarService} from 'ng2-al-slim-bar';
 
@Component({
    selector: 'app',
    template: `
        <div>Hello world</div>
        <button (click)="startLoading()">Start Loading</button>
        <button (click)="stopLoading()">Stop Loading</button>
        <button (click)="completeLoading()">Complete Loading</button>
        <ng2-slim-loading-bar></ng2-slim-loading-bar>
    `
})
export class AppComponent {
 
    constructor(private slimLoadingBarService: SlimLoadingBarService) { }
 
    startLoading() {
        this.slimLoadingBarService.start(() => {
            console.log('Loading complete');
        });
    }
 
    stopLoading() {
        this.slimLoadingBarService.stop();
    }
 
    completeLoading() {
        this.slimLoadingBarService.complete();
    }
}

3. Customize the the ng2-al-slim-bar for your application

You can use the following properties to customize the ng2-slim-loading-bar component in your template:

  • color - The color of loading bar. Default is firebrick. It can be any CSS compatible value.
  • height - The height of loading bar. Default value is 2px.
  • show - The flag helps hide and show the loading bar. Default value is true.

Example: <ng2-slim-loading-bar color="blue" height="4px"></ng2-slim-loading-bar>

4. Manage the loading bar

You can use the following properties to customize the SlimLoadingBar via instance of SlimLoadingBarService:

  • color - The color of loading bar.
  • height - The height of loading bar.
  • visible - The flag helps hide and show the loading bar, false for hidden and true for visible.

You can use the following methods to control the SlimLoadingBar via instance of SlimLoadingBarService:

  • start - Start the loading progress. Use the callback function as an parameter to listed the complete event.
  • stop - Stop the loading progress. This method pause the current position of loading progress.
  • reset- Reset the position of loading progress to 0.
  • complete - Set the progress to 100% and hide the progress bar.

5. Events handling

You can hook up with our different types of events thrown.

  • SlimLoadingBarEventType.PROGRESS
  • SlimLoadingBarEventType.HEIGHT
  • SlimLoadingBarEventType.COLOR
  • SlimLoadingBarEventType.VISIBLE

you can subscribe to these events types by simplying doing this

 constructor(private _loadingBar: SlimLoadingBarService) {
    this._loadingBar.events.subscribe((item:SlimLoadingBarEvent) => console.log(item));
   }

where item returned is of SlimLoadingBarEvent {type: SlimLoadingBarEventType, value: any}

Credits

Inspired by ngProgress.js

fork of ng2-slim-loading-bar

License

MIT

Install

npm i ng2-al-slim-bar

DownloadsWeekly Downloads

16

Version

0.0.4

License

MIT

Unpacked Size

58.5 kB

Total Files

28

Last publish

Collaborators

  • avatar