Angular(v4) component that shows a loading bar at the top of a component or module
Installation
npm install ng4-loader-bar --save
Usage
Using SystemJS to load your files may require a update to your config:
System;
Update your application/web page with the following markup
- Import the
style.css
into your web page or app.
"styles":
- Add the
<ng4-loader-bar></ng4-loader-bar>
component tag within the component you want the loading bar to appear:
Component with a loading bar ...
The default styles are:
AngularLoadingBarModule
Import Import AngularLoadingBarModule.forRoot()
in the NgModule of your application.
;;
Using a shared module allows AngularLoadingBarModule
to be exported without having to import it multiple times.
AngularLoadingBarService
in your Angular application
Using - Import
AngularLoadingBarService
fromng4-loader-bar
(within your node_modules directory) into your component code:
;; @ { } { thisangularLoadingBarServicestart; } { thisangularLoadingBarService; } { thisangularLoadingBarServicecomplete; }
ng4-loader-bar
to tailor to your application
Customize the Example:
<ng4-loader-bar [color]="'green'" [height]="'6px'"></ng4-loader-bar>
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 will pause the progress of the loading bar;start()
will resume animation from the current position.reset()
- Reset the position of loading progress to 0. This method will stop the current progress animation; usingstart()
afterreset()
will start a new animation from 0.complete()
- Set the progress to 100% and hide the progress bar.