Que tal compañeros, he estado trabajando en crear un efecto de loading como es la tendencia actualmente. Pero se me ha dificultado un poco encontrar uno bonito, me gusto mucho el que usa EDteam en sus banners, pero no logro recrear el efecto, logre hacer uno pero aún se ve un poco entre cortado el efecto.

1$base-color: #F6F6F6;
2$shine-color: #F0F0F0;
3$animation-duration: 2.0s;
4$gray: #e8e8e8;
5
6@mixin skeleton-text {
7  background: $gray;
8  background-image: linear-gradient(90deg, $base-color 0px, $shine-color 40px, $base-color 80px);
9  background-size: 600px;
10}
11
12@mixin skeleton-avatar($start: 0, $end: 0) {
13  $name: shine-avatar-#{unique-id()};
14  @keyframes #{$name} {
15     0% {
16        @if $start != 0 {
17           background-position: $start;
18        } @else {
19           background-position: -100px;
20        }
21
22     }
23     40%, 100% {
24        @if $end != 0 {
25           background-position: $end;
26        } @else {
27           background-position: 140px;
28        }
29     }
30  }
31
32  animation: $name $animation-duration infinite ease-out;
33}

1.icon_card {
2   @include skeleton-text();
3   @include skeleton-avatar();
4}

Entonces si alguien me podría ayudar a mejorar el rendimiento de esta animación o lograr replicar la del banner de EDteam estaría super ya que en lo personal me gusta mucho ese efecto que le aplicaron.

adjunto imagen del efecto que yo conseguí, y también del efecto que realiza EDteam.