
Security News
Node.js Homepage Adds Paid Support Link, Prompting Contributor Pushback
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.
ngx-shimmer-loading
Advanced tools
Facebook-style shimmer loading placeholder for Angular 15+. Simple, customizable, and easy to use in any Angular project.
Facebook shimmer loading effect for Angular 15+ apps. It's a fancy way to tell your users that there's something loading.
ngx-shimmer-loading is simple and easy to use. It also comes with the two directions
See Demo page.
ngx-shimmer-loading
:npm i --save ngx-shimmer-loading
NgxShimmerLoadingModule
into your module:import { NgxShimmerLoadingModule } from 'ngx-shimmer-loading';
@NgModule({
...
imports: [ NgxShimmerLoadingModule ],
...
})
export class AppModule {}
ngx-shimmer-loading
component:<ngx-shimmer-loading></ngx-shimmer-loading>
You can customize it with different inputs - check API for more details.
Example:
<ngx-shimmer-loading [shape]="'square'" [width]="'70px'"></ngx-shimmer-loading>
Input | Type | Default | Required | Description |
---|---|---|---|---|
shape | 'circle' OR 'square' OR 'rect' | rect | no | Set shimmer shape. |
width | string | '80%' | no | Set shimmer width. In case of shape is 'circle' or 'square' use width with px unit. |
height | string | '12px' | no | Set shimmer height. In case of shape is 'circle' or 'square' shimmer height will equal shimmer width. |
borderRadius | string | '5px' | no | Set shimmer border radius. In case of shape is 'circle' borderRadius equals '50%' |
direction | 'ltr' OR 'rtl' | 'ltr' | no | Set shimmer direction. |
If you are not happy with default styles you can easily override them with your styles like that:
.shimmer-loading .ngx-shimmer {
// Your styles go here...
}
Note that: shimmer effect animation here depends on css linear-gradient
property so, if you want to change its color you can edit it or you can unset it and change its background-color
value if you don't want the shimmer effect animation.
Contributions are welcome. You can start by looking at issues with label Help wanted or creating new Issue with proposal or bug report.
FAQs
Facebook-style shimmer loading placeholder for Angular 15+. Simple, customizable, and easy to use in any Angular project.
The npm package ngx-shimmer-loading receives a total of 544 weekly downloads. As such, ngx-shimmer-loading popularity was classified as not popular.
We found that ngx-shimmer-loading 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
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.
Research
North Korean threat actors linked to the Contagious Interview campaign return with 35 new malicious npm packages using a stealthy multi-stage malware loader.
Research
Security News
The Socket Research Team investigates a malicious Python typosquat of a popular password library that forces Windows shutdowns when input is incorrect.