Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

scremer-shimmer

betteranalytics22MIT2.0.5

Scremer shimmer effect for Angular 16+ apps. It's a fancy way to tell your users that there's something loading.

scremer, loading, scremer shimmer, angular, angular shimmer, scremer loading, angular16

readme

Scremer Shimmer for Angular 16+ Apps

Scremer shimmer effect for Angular 16+ apps. It's a fancy way to tell your users that there's something loading.

scremer-shimmer is simple and easy to use. It also comes with the two directions.

scremer-shimmer is designed to work seamlessly with the latest Angular versions, ensuring a smooth loading experience for your applications.

Table of contents

Features

  • <input checked="" disabled="" type="checkbox"> Easy and simple to use.
  • <input checked="" disabled="" type="checkbox"> Easy to setup.
  • <input checked="" disabled="" type="checkbox"> No Dependencies.
  • <input checked="" disabled="" type="checkbox"> Fancy Animations.

Getting started

Step 1: Install scremer-shimmer:

NPM

npm i --save scremer-shimmer

Step 2: Import the ScremerShimmerModule into your module:

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

Step 3: Use the scremer-shimmer component:

<scremer-shimmer></scremer-shimmer>

You can customize it with different inputs - check API for more details.

Example:

<scremer-shimmer [shape]="'square'" [width]="'70px'"></scremer-shimmer>

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 .scremer-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.

Credits

This library is inspired by the work of Ahmed Beheiry. We extend our gratitude to Ahmed for his contributions and innovative ideas in the field of front-end development.

| Author | E-mail | URL | | ------------- | ------------- | ------------- | ------------- | | [Chaitanya Bavirisetti] | [chaitanyabavirisetti@yahoo.com ] | | [https://shimmer.github.io/ngx-shimmer-loading ] |