AkSkelton

This library was generated with Angular CLI version 13.2.0.

Installation

Run install ak-skelton library by running the following command.

npm i ak-skelton

add AkSkeltonModule to your angular modules like app.module.ts.

Preview

Demo Application Demo. Examples Code for usage.

-- Whenever isLoading is true then it will starts display the skelton placeholder to indicate loader progress.

<div class="flex">
  <p>Test 1:</p>
  <p *skeleton="isLoading; 
                height: '50px'; 
                width: '500px'">
  </p>
</div>

<section class="flex">
  <p>Test Dynamically create:</p>
  <ng-container *skeleton="isLoading; 
                           repeat: 5; 
                           className: 'mb-2'; 
                           height: '100px';
                           width: '500px'">
<!-- content goes here -->
    <div *ngFor="let num of [1,2, 3]">
      {{ num }}
    </div>

  </ng-container>
</section>

<p>Test Randon width :</p>
<ng-container *skeleton="isLoading; 
                         repeat: 5; 
                         className: 'mb-2'; 
                         height: '30px'; 
                         width: 'rand'">
  <!-- content goes here -->
  <div *ngFor="let num of [1,2, 3, 4, 5]">
    {{ num }}
  </div>

</ng-container>

Hire me or Contact me for any modifications or help

[e-mail]