@antmjs/vantui/lib/skeleton/index.less

一套适用于Taro3及React的vantui组件库

@import '../style/var.less';

.van-skeleton {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  .theme(padding, '@skeleton-padding');

  &__avatar {
    flex-shrink: 0;
    animation: van-skeleton-blink 1.3s ease infinite;
    background: linear-gradient(
      90deg,
      hsla(0deg, 0%, 74.5%, 0.2) 25%,
      hsla(0deg, 0%, 50.6%, 0.24) 37%,
      hsla(0deg, 0%, 74.5%, 0.2) 63%
    );
    background-size: 400% 100%;

    .theme(margin-right, '@padding-md');
    .theme(background-color, '@skeleton-avatar-background-color');

    &--round {
      border-radius: 100%;
    }
  }

  &__content {
    flex: 1;
  }

  &__avatar + &__content {
    .theme(padding-top, '@padding-xs');
  }

  &__row,
  &__title {
    animation: van-skeleton-blink 1.3s ease infinite;
    background: linear-gradient(
      90deg,
      hsla(0deg, 0%, 74.5%, 0.2) 25%,
      hsla(0deg, 0%, 50.6%, 0.24) 37%,
      hsla(0deg, 0%, 74.5%, 0.2) 63%
    );
    background-size: 400% 100%;

    .theme(height, '@skeleton-row-height');
  }

  &__title {
    margin: 0;
  }

  &__row {
    &:not(:first-child) {
      .theme(margin-top, '@skeleton-row-margin-top');
    }
  }

  &__title + &__row {
    margin-top: 40px;
  }
}

@keyframes van-skeleton-blink {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}