_placeholder.scss 672 Bytes
Newer Older
arturo's avatar
arturo committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
%placeholder {
  $width: 800px;
  $bg-color: $white;

  &::after {
    @include fit-positions;

    content: "";
    animation-duration: 1.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: __placeholder;
    animation-timing-function: linear;
    background:
      linear-gradient(
        to right,
        transparent 10%,
        mix-alpha($bg-color, 60%) 18%,
        transparent 33%
      );
    background-size: $width 100%;
    position: absolute;
  }

  @keyframes __placeholder {
    from {
      background-position: #{ - $width / 2 } 0;
    }
    to {
      background-position: #{ $width / 2 } 0;
    }
  }
}