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
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.
A library for loading spinner specifically for Angular 4/5/6/7/8. (https://napster2210.github.io/ngx-spinner/)
show()/hide()
methods return promiseUse appropriate version based on your Angular version.
Angular 4 | Angular 5 | Angular 6/7/8 |
---|---|---|
>= v1.2.0 | >= v2.0.0 | >= v8.0.0 |
Chrome | Firefox | IE / Edge | Safari | Opera |
---|---|---|---|---|
Latest ✔ | Latest ✔ | IE11, Edge ✔ | Latest ✔ | Latest ✔ |
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 Demo
NgxSpinnerService.show()
Shows the spinnerNgxSpinnerService.hide()
Hides the spinner<ngx-spinner
bdColor="rgba(51,51,51,0.8)"
size="medium"
color="#fff"
type="ball-scale-multiple"
>
<p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>
rgba(51,51,51,0.8)
where aplha
value(0.8) is opacity of backdropsmall
, default
, medium
, large
.
To set size of spinner, default large
#fff
ball-scale-multiple
true
or false
To enable/disable fullscreen mode(overlay), default true
primary
HTML
code as loading text now, instead of input parameter(loadingText
). Check above code for reference.ngx-spinner
instance, just add name
attribute with ngx-spinner
component. But in this case, you've to pass that particular name of a spinner in show/hide
method. Check Demothis.spinner.show("mySpinner", {
type: "line-scale-party",
size: "large",
bdColor: "rgba(100,149,237, .8)",
color: "white"
});
type
will be ball-8bits
.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.
z-index
Inspired by Load Awesome by Daniel Cardoso.
Thanks Alex Vieira Alencar for helping me with Multiple Spinner Support.
ngx-spinner is MIT licensed.
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.