@sreyaj/ng-shimmer
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    NG Shimmer - Content Placeholder

    angular License: Apache License 2.0 Twitter: Adithya Sreyaj

    Shimmer Animation for Angular Applications

    Angular Remix Icon

    Simple and easy to user Shimmer Animation placeholder for your Angular applications. An application should be having a good User Experience inorder to succeed. Smaller things like adding a shimmer animation to let the users know that something is being loaded is a great way to improve the application's UX.

    User Ratings Card

    Profile Card

    Features

    • Simple and Easy to Setup
    • Ease to use
    • CSS based super light
    • Zero Dependencies
    • Customizable

    How to Use the Component

    Install the package using the command:

    npm i @sreyaj/ng-shimmer
    

    Import the StarRatingModule into your module

    import { ShimmerModule } from '@sreyaj/ng-shimmer';
    @NgModule({
      ...
      imports: [ShimmerModule],
      ...
    })
    export class AppModule {}

    Now you can use the component inside your application

    <shimmer></shimmer>

    You can now customize it with the following attributes

    Eg with few options:

    <shimmer width="100px" type="circle"></shimmer>
    <shimmer width="100px" borderRadius="2px"></shimmer>

    Global Configuration

    You can now configure the colors and animation durations for the whole application using the Injection token.

    Default Options applied:

    {
      width: '100%',
      height: '16px',
      borderRadius: '8px',
      colors: {
        background: '#edeef1',
        1: '#edeef1',
        2: '#f6f7f8',
        3: '#f4f4f4',
        4: '#edeef1',
      },
      duration: '1s',
    }

    Override defaults

    You can override the defaults like so:

    @NgModule({
      declarations: [],
      imports: [BrowserModule, ShimmerModule],
      providers: [
        {
          provide: SHIMMER_OPTIONS, // <-- provide the token
          useValue: {
            width: '100%',
            height: '24px',
            borderRadius: '8px',
            colors: {
              background: 'red',
              1: '#edeef1',
              2: '#f6f7f8',
              3: '#f4f4f4',
              4: '#edeef1',
            },
            duration: '4s',
          },
        },
      ],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

    Customizations

    Feature Description Attribute Type Default
    Type Of Shimmer You can change the appearance of the shimmer type 'line' or 'circle' or 'square' 'line
    Width of the Shimmer Shimmer width can be customized according to your need width string '100%'
    Height of the Shimmer Shimmer height can be customized according to your need height string '12px'
    Animation Duration Shimmer animation duration can be customized according to your need duration string '1s'
    Border Radius Custom border radius values can be specified borderRadius string -
    Rounded Shimmer corners can be rounded of for 'line' or 'square' type rounded boolean false

    Breaking Changes

    • In v2, the extra div that is added by shimmer component is removed. Instead the styles are applied to the host directly

    Feel free to open Issues and Pull Requests

    Install

    npm i @sreyaj/ng-shimmer

    DownloadsWeekly Downloads

    241

    Version

    2.0.0

    License

    Apache License 2.0

    Unpacked Size

    72.1 kB

    Total Files

    20

    Last publish

    Collaborators

    • adi.sreyaj