NgxSpinner
A library for loading spinner specifically for Angular 4/5. (https://napster2210.github.io/ngx-spinner/)
The version 1.x supports Angular 4 & 5. UPDATE: Now works with Angular 4(v1.2.0)
Angular 4 | Angular 5 |
---|
>= v1.2.0 | >= v2.0.0 |
Table of contents
Browser Support
| | | | |
---|
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | Latest ✔ |
Demo
Working Demo
Installation
ngx-spinner
is available via npm and yarn
Using npm:
$ npm install ngx-spinner --save
Using yarn:
$ yarn add ngx-spinner
Usage
Import NgxSpinnerModule
in in the root module(AppModule
):
import { NgxSpinnerModule } from 'ngx-spinner';
@NgModule({
imports: [
NgxSpinnerModule
]
})
export class AppModule { }
Add NgxSpinnerService
service wherever you want to use the ngx-spinner
.
import { NgxSpinnerService } from 'ngx-spinner';
class AppComponent implements OnInit {
constructor(private spinner: NgxSpinnerService) { }
ngOnInit() {
this.spinner.show();
setTimeout(() => {
this.spinner.hide();
}, 5000);
}
}
Now use in your template
<ngx-spinner></ngx-spinner>
See Demo
NgxSpinner Service
NgxSpinnerService.show()
Shows the spinnerNgxSpinnerService.hide()
Hides the spinner
NgxSpinner Component
<ngx-spinner [bdColor]="rgba(51,51,51,0.8)" [size]="medium" [color]="#fff" [loadingText]="Loading..." [type]="ball-scale-multiple"></ngx-spinner>
- [bdColor]: RGBA color format.
To set background-color for backdrop, default
rgba(51,51,51,0.8)
where aplha
value(0.8) is opacity of backdrop - [size]: Anyone from
small
, default
, medium
, large
.
To set size of spinner, default large
- [color]: Any css color format.
To set color of spinner, default
#fff
- [loadingText]: Loading Text.
To set loadingText of spinner, default
false
- [type]: Choose any animation spinner from Load Awesome.
To set type of spinner, default
ball-scale-multiple
How to use type?
- Go to the Load Awesome.
- Select any animation, copy name of animation, replace all spaces with hyphen(-) and all letters should be lowercase.
- Let's say if I select "Ball 8bits" animation then
type
will be ball-8bits
. - For more information you can check it out Demo
Versioning
ngx-spinner will be maintained under the Semantic Versioning guidelines.
Releases will be numbered with the following format:
<major>.<minor>.<patch>
For more information on SemVer, please visit http://semver.org.
Creator
Future Plan
- Interceptor Implementation (Coming soon)
- Spinner in specific container(DOM Element)
Credits
Inspired by Load Awesome by Daniel Cardoso.
License
The MIT License (MIT)