ngx-shimmer-loading
Advanced tools
Weekly downloads
Readme
Facebook shimmer loading effect for Angular 8+ 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 shimmer loading effect for Angular 8+ 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.
The npm package ngx-shimmer-loading receives a total of 500 weekly downloads. As such, ngx-shimmer-loading popularity was classified as not popular.
We found that ngx-shimmer-loading demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.