Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
ngx-spinner
Advanced tools
[![ng5](https://img.shields.io/travis/rust-lang/rust.svg?style=flat-square)]() [![Support](https://img.shields.io/badge/Support-Angular%202%2B-brightgreen.svg?style=flat-square)]() [![License](https://img.shields.io/npm/l/express.svg?style=flat-square)]
ngx-spinner is an Angular library that provides a variety of customizable loading spinners to indicate the loading state of a web application. It is easy to integrate and offers a wide range of spinner types and configurations.
Basic Spinner
This feature allows you to add a basic spinner to your Angular application. You can customize the background color, size, color, and type of the spinner.
<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple"></ngx-spinner>
Conditional Spinner
This feature allows you to display the spinner conditionally based on a boolean variable. In this example, the spinner will be shown only when `isLoading` is true.
<ngx-spinner *ngIf="isLoading" bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple"></ngx-spinner>
Custom Template
This feature allows you to use a custom template for the spinner. You can place any HTML content inside the ngx-spinner tag to create a custom loading indicator.
<ngx-spinner><div class="custom-spinner-template">Loading...</div></ngx-spinner>
Spinner Service
This feature provides a service to control the spinner programmatically. You can use the `show` and `hide` methods of the `NgxSpinnerService` to display or hide the spinner.
import { NgxSpinnerService } from 'ngx-spinner';
constructor(private spinner: NgxSpinnerService) {}
showSpinner() {
this.spinner.show();
}
hideSpinner() {
this.spinner.hide();
}
ngx-loading is another Angular library for displaying loading indicators. It offers similar functionalities to ngx-spinner but with a different set of customization options and spinner types.
angular-loading-bar is a package that provides a loading bar at the top of the page instead of a spinner. It is useful for indicating the loading state of HTTP requests and offers a different visual approach compared to ngx-spinner.
ng2-loading-spinner is a lightweight Angular library for adding loading spinners. It offers basic spinner functionalities and is simpler compared to ngx-spinner, making it suitable for projects with minimal loading indicator requirements.
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | Latest ✔ |
Working Demo: Plunkr Demo
ngx-spinner
is available via npm and yarn
Using npm:
$ npm install ngx-spinner --save
Using yarn:
$ yarn add ngx-spinner
Import NgxSpinnerModule
in in the root module(AppModule
):
// Import library module
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() {
/** spinner starts on init */
this.spinner.show();
setTimeout(() => {
/** spinner ends after 5 seconds */
this.spinner.hide();
}, 5000);
}
}
Now use in your template
<ngx-spinner></ngx-spinner>
See Plunkr Demo
NgxSpinnerService.show()
Shows the spinnerNgxSpinnerService.hide()
Hides the spinner<ngx-spinner [bdOpacity]="0.9" [bdColor]="#909090" [size]="medium" [color]="#fff"></ngx-spinner>
0.0
to 1.0
.
To set opacity of backdrop, default 0.8
#333
small
, default
, medium
, large
.
To set size of spinner, default large
#fff
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.
FAQs
A library with more than 50 different loading spinners for Angular 4 - 17. (https://napster2210.github.io/ngx-spinner/)
The npm package ngx-spinner receives a total of 76,155 weekly downloads. As such, ngx-spinner popularity was classified as popular.
We found that ngx-spinner demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.