ngx-shimmering-loader
v1.0.5
Published
A facebook like loader with animation for your Angular 6 applications.
Downloads
80
Maintainers
Readme
ngx-shimmering-loader
A component that provides shimmering loading placeholder like facebook.
Installation
Install ngx-shimmering-loader
via NPM, using the command below:
NPM
npm install --save ngx-shimmering-loader
Getting started
Import the NgxShimmeringLoaderModule
in your root application module AppModule
or any other module you need to use the component:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {CommonModule} from '@angular/common';
import { AppComponent } from './app.component';
import {NgxShimmeringLoaderModule} from 'ngx-shimmering-loader';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule, // Import NgxShimmeringLoaderModule
NgxShimmeringLoaderModule
],
providers: [],
bootstrap: [AppComponent] })
export class AppModule { }
Using it in a component
After importing the NgxShimmeringLoaderModule
, you can use the NgxShimmeringLoaderComponent
component as below:
<ngx-shimmering-loader
[style]="style" [elemCount]="3" [isVisible]="!list">
</ngx-shimmering-loader>
The style
input parameter should be used to set the width
and height
css properties.
Input Parameters
| Attribute | Type | Required | Default | Description |
| ------------- | ----------------- | ---------- | ---------- | ----------------------------------------------------------------------------------------- |
| isVisible
| boolean | requried | | If true
, the placeholder will be visible. |
| elemCount
| number | optional | 1| Number of placeholders that needs to be displayed. |
| style
| object | optional | {'width':'200px','height': '300px','margin': '10px' }
| An object suitable for the ngStyle
directive that is applied on the placeholder. This should be used to set the width
and height
css properties. |
|
License
This project is licensed under the MIT License.