ngx-shimmer-loading

Shimmer Loading for Angular 15+ Apps

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.

Table of contents

• Features
• Getting started
• API
• Custom Styles
• Contributing

Features

• Easy and simple to use.
• Easy to setup.
• No Dependencies.
• Fancy Animations.

Getting started

Step 1: Install ngx-shimmer-loading:

NPM

npm i --save ngx-shimmer-loading

Step 2: Import the NgxShimmerLoadingModule into your module:

import { NgxShimmerLoadingModule } from  'ngx-shimmer-loading';
@NgModule({
  ...
  imports: [ NgxShimmerLoadingModule ],
  ...
})
export class AppModule {}

Step 3: Use the 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>

API

Inputs

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.

Custom Styles

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.

Contributing

Contributions are welcome. You can start by looking at issues with label Help wanted or creating new Issue with proposal or bug report.