Skeleton loading mixin

index.html

<picture class="lazy">
  <img src="https://picsum.photos/200/300" loading="lazy">
</picture>

Skeleton.scss

//easy animation control
@mixin animation($name, $duration, $timing, $loop) {
  animation: $name $duration $timing $loop;
}

//simple aspect ratio
@mixin aspect-ratio($width, $height) {
  padding-top: ($height / $width) * 100%;
}

@mixin skeleton ($color1, $color2) {
  @include animation(skeleton, 1.6s, ease-in-out, infinite);
  animation-fill-mode: forwards;
  background: linear-gradient(to right, $color1 0%, $color2 20%, $color1 100%);
}


.lazy {
  @include aspect-ratio(1920, 1080); //image width / height * 100%
  @include skeleton(#616161, #757575);
  background-size: 200% 100%; //for the moving effect
  postion: relative;
  width: 100%;
  
  img {
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    
  }
  
}