tdesign-react/esm/style/web/components/progress/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

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

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_reset.less";

// 进度条基本样式
.@{prefix}-progress {
  .reset;

  &__inner {
    position: relative;
    height: 100%;
    background: @progress-inner-color;
    border-radius: @border-radius-round;
    transition: @progress-inner-transition;
  }

  &__info {
    margin-left: @progress-info-spacer;
    color: @progress-info-dark-color;
    white-space: nowrap;
    display: inline-flex;
  }

  &__icon {
    font-size: @progress-icon-font-size;
  }
}

.@{prefix}-progress__bar {
  width: 100%;
  height: @progress-line-stroke-width;
  overflow: hidden;
  background: @progress-track-color;
  border-radius: @border-radius-round;
}

//标准进度条
.@{prefix}-progress--thin {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

//条形进度条 百分比内置
.@{prefix}-progress--plump {
  height: @progress-stroke-plump-width;
  border-radius: calc(@progress-stroke-plump-width / 2);
  display: flex;
  align-items: center;
  .@{prefix}-progress__info {
    font-size: @progress-plump-font-size;
  }
}

.@{prefix}-progress--over-ten {
  .@{prefix}-progress__info {
    position: absolute;
    top: 50%;
    z-index: 10;
    right: @progress-info-spacer;
    color: @progress-info-light-color;
    transform: translateY(-50%);
  }
}

.@{prefix}-progress--under-ten {
  .@{prefix}-progress__info,
  .@{prefix}-progress__inner {
    display: inline-block;
  }

  .@{prefix}-progress__info {
    vertical-align: top;
  }
}

//环形
.@{prefix}-progress--circle {
  position: relative;

  .@{prefix}-progress__info {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 100%;
    margin: 0;
    font-size: @progress-circle-font-size;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .@{prefix}-progress__circle-outer {
    stroke: @progress-track-color;
  }

  .@{prefix}-progress__circle-inner {
    stroke: @progress-inner-color;
    transition: @progress-inner-transition;
  }

  .@{prefix}-progress__icon {
    font-size: @progress-icon-circle-font-size;
  }
}

//进度条状态
.@{prefix}-progress--status--active {
  .@{prefix}-progress__inner {
    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      content: "";
      animation: progress-active-animation 2s
        cubic-bezier(.23, .99, .86, .2) infinite;
      background: @progress-inner-bg-color-active;
      opacity: .2;
    }
  }
}

.@{prefix}-progress--status--success {
  .@{prefix}-progress__inner {
    background: @progress-success;
  }

  .@{prefix}-progress__circle-inner {
    stroke: @progress-success;
  }

  .@{prefix}-progress__icon {
    color: @progress-success;
  }
}

.@{prefix}-progress--status--warning {
  .@{prefix}-progress__inner {
    background: @progress-warning;
  }

  .@{prefix}-progress__circle-inner {
    stroke: @progress-warning;
  }

  .@{prefix}-progress__icon {
    color: @progress-warning;
  }
}

.@{prefix}-progress--status--error {
  .@{prefix}-progress__inner {
    background: @progress-error;
  }

  .@{prefix}-progress__circle-inner {
    stroke: @progress-error;
  }

  .@{prefix}-progress__icon {
    color: @progress-error;
  }
}

@keyframes progress-active-animation {
  0% {
    width: 0;
    opacity: .1;
  }

  35% {
    width: 50%;
    opacity: .4;
  }

  100% {
    width: 100%;
    opacity: 0;
  }
}