https://github.com/f22hd/simple-ngx-loading-bar

A library that allows to a developer using loading bar indicator for getting better user expeirence.
https://github.com/f22hd/simple-ngx-loading-bar

angular angular-lib typescript

Last synced: 10 days ago
JSON representation

A library that allows to a developer using loading bar indicator for getting better user expeirence.

• Host: GitHub
• URL: https://github.com/f22hd/simple-ngx-loading-bar
• Owner: f22hd
• Created: 2020-05-08T18:42:17.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-10-11T06:58:45.000Z (about 1 year ago)
• Last Synced: 2024-09-29T12:08:34.262Z (about 2 months ago)
• Topics: angular, angular-lib, typescript
• Language: TypeScript
• Homepage: http://simple-ngx-loading-bar.surge.sh/
• Size: 822 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# SimpleLoadingBar

An angular library allows a developer to show the loading bar at the top of the app, such as indicating an Http request and showing the loading bar until request is finished.

#### About Library

it contains a single component that should be added into your parent component app or header app.

To make sure the loading bar will be on top of the app,

the component styled with an absolute position so always will be top and above on all elements.

### Installation

- run this command in your terminal

```

npm i simple-ngx-loading-bar

```

- import the module in your app module

```

import { SimpleNgxLoadingBarModule } from 'simple-ngx-loading-bar';

@NgModule({

  declarations: [...],

  imports: [

   ...,

    SimpleNgxLoadingBarModule.forRoot({

      color: 'red' // define your custom color by any background property value.

    })

  ],

  providers: [],

  bootstrap: [...]

})

export class AppModule { }

```

- add the selector into your component html

```

 

```

- finally , we have it's service for controlling visiblity of the loading bar.

```

import { SimpleNgxLoadingBarService } from 'simple-ngx-loading-bar';

export class AppComponent {

  constructor(private loader: SimpleNgxLoadingBarService) { }

  start() {

  // show loading indicator

    this.loader.show();

  }

  complete() {

  // hide loading indicator

    this.loader.hide();

  }

```

That's set.

### Contribution

I will be more than happy to join me in this project.

just open via codebase and do your magic then make pull request.