tt-mp/src/skeleton-paragraph/index.less

一套组件化、可复用、易扩展的头条小程序 UI 组件库

@import '../styles/mixins/index.less';
@import '../styles/themes/index.less';

.@{wux-prefix}-skeleton-paragraph {
  position: relative;
  overflow: hidden;

  &__row {
    height: @skeleton-paragraph-size;
    background: @skeleton-bg;
    width: 100%;
    margin-top: 16px;

    &:first-child {
      margin-top: 0;
    }

    &:nth-child(4n + 1) {
      width: 80%;
    }

    &:nth-child(4n + 2) {
      width: 100%;
    }

    &:nth-child(4n + 3) {
      width: 70%;
    }

    &:nth-child(4n + 4) {
      width: 85%;
    }
  }

  &--rounded &__row {
    border-radius: @skeleton-radius;
  }

  &--active &__row {
    background:
      linear-gradient(
        90deg,
        @skeleton-bg 25%,
        @skeleton-to-bg 37%,
        @skeleton-bg 63%
      );
    animation: loading 1.4s ease infinite;
    background-size: 400% 100%;
  }
}

@keyframes loading {
  0% {
    background-position: 100% 50%;
  }

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