tdesign-mobile-vue/esm/_common/style/mobile/components/skeleton/_index.less

tdesign-mobile-vue

@import "../../base.less";

@import "./_var.less";

.@{prefix}-skeleton {
  box-sizing: border-box;

  &__row {
    display: flex;
    margin-bottom: @row-margin-bottom;
    align-items: center;
    justify-content: space-between;
  }

  &__row:only-child,
  &__row:last-child {
    margin-bottom: 0;
  }

  &__col {
    background-color: @skeleton-background-color;
    border-radius: @border-radius-text;
    display: flex;
    align-items: center;
    justify-content: center;

    &:first-child:last-child,
    &:last-child {
      margin-right: 0;
    }
  }

  &--type {
    &-text {
      width: 100%;
      height: @text-height-default;
      border-radius: @border-radius-text;
    }

    &-rect {
      width: 100%;
      height: @rect-height-default;
      border-radius: @border-radius-rect;
    }

    &-circle {
      width: @circle-height-default;
      height: @circle-height-default;
      border-radius: @border-radius-circle;
      flex-shrink: 0;
    }
  }

  &--animation {
    &-gradient {
      position: relative;
      overflow-x: hidden;

      &::after {
        content: " ";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0%),
          @skeleton-animation-gradient,
          rgba(255, 255, 255, 0%)
        );
        animation: t-skeleton--gradient 1.5s linear 2s infinite;
      }
    }

    &-flashed {
      animation: t-skeleton--flashed 2s linear 2s infinite;
    }
  }

  @keyframes t-skeleton--gradient {
    0% {
      transform: translateX(-100%) skewX(-15deg);
    }

    100% {
      transform: translateX(100%) skewX(-15deg);
    }
  }

  @keyframes t-skeleton--flashed {
    0% {
      opacity: 1;
    }

    50% {
      background-color: @skeleton-animation-flashed;
      opacity: .3;
    }

    100% {
      opacity: 1;
    }
  }
}