Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

ngx-shimmer-loading

Package Overview
Dependencies
1
Maintainers
1
Versions
4
Issues
File Explorer

Advanced tools

ngx-shimmer-loading

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.

    0.0.5latest
    GitHub

Version published
Maintainers
1
Weekly downloads
677
decreased by-28.81%

Weekly downloads

Readme

Source

Shimmer Loading for Angular 8+ Apps

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.

Table of contents

Features

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

InputTypeDefaultRequiredDescription
shape'circle' OR 'square' OR 'rect'rectnoSet shimmer shape.
widthstring'80%'noSet shimmer width. In case of shape is 'circle' or 'square' use width with px unit.
heightstring'12px'noSet shimmer height. In case of shape is 'circle' or 'square' shimmer height will equal shimmer width.
borderRadiusstring'5px'noSet shimmer border radius. In case of shape is 'circle' borderRadius equals '50%'
direction'ltr' OR 'rtl''ltr'noSet 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.

Keywords

FAQs

Last updated on 24 Jun 2020

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.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc