skeleton loader css in angular

To implement a CSS skeleton for the provided HTML template, you can modify the code as follows:

1. In your component's CSS file (your-component.component.css), or globally define the styles for the skeleton:

.skeleton {
    width: 100%;
    height: 20px;
    background-color: #e0e0e0;
    animation: skeleton-animation 1.5s infinite;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-size: 40px 100%;
    background-repeat: no-repeat;
  }

@-webkit-keyframes skeleton-animation {
to {
      background-position: right -40px top 0;
    }
}
@keyframes skeleton-animation {
    to {
      background-position: right -40px top 0;
    }
}

2. Modify your HTML template (your-component.component.html) to include the skeleton CSS classes and conditionally render the skeleton. suppose data is in coupon variable 

<div class="row gy-6">
  <h3 class="">Coupon Codes</h3>
  
  <div class="col-md-6 col-lg-4" *ngFor="let coupon of coupons">
    <a href="#" class="card shadow-lg border h-100">
      <div class="card-body p-5 d-flex flex-row">
        <div>
          <img class="w-15" src="assets/icons/{{coupon?.Logo || 'assets/icons/placeholder.png'}}" alt="">
          <span class="badge bg-violet  rounded py-1 mb-2">Up to 50% Off</span>
          <h4 class="mb-1">Title of the Product with details and more...</h4>
          <p class="mb-0 text-body btn btn-outline-gradient gradient-5 btn-sm"><span >SAVE $50</span></p>
          <button class="btn btn-sm float-end btn-red btn-icon rounded px-3"><i class="uil uil-heart"></i></button>
        </div>
      </div>
    </a>
  </div>
</div>
<!--/.row -->

<!--row -->
<div class="row" *ngIf="!coupons">
  <!-- Skeleton HTML structure -->
  <div class="col-md-6 col-lg-4"  *ngFor="let item of [1,2,3]">
    <a href="#" class="card shadow-lg border h-100">
      <div class="card-body p-5 d-flex flex-row">
        <div>
          <div class="skeleton w-15">&nbsp;</div>
          <div class="skeleton badge bg-violet rounded py-1 mb-2">&nbsp;</div>
          <div class="skeleton mb-1">&nbsp;</div>
          <div class="skeleton mb-0 text-body btn btn-outline-gradient gradient-5 btn-sm">&nbsp;</div>
          <div class="skeleton btn btn-sm float-end btn-red btn-icon rounded px-3">&nbsp;</div>
        </div>
      </div>
    </a>
  </div>
</div>
<!--/.row -->

In the above code, the skeleton elements have the skeleton class applied to them, which will apply the CSS styles defined earlier. The skeleton structure is rendered when there are no coupons available.

Additionally, the *ngIf directive is used to conditionally display the skeleton structure (*ngIf="!coupons") when the coupons data is not present.