naive-ui/styles/Progress.scss

@import "./mixins/mixins.scss";
@import "./themes/vars.scss";

@mixin progress-animation-mixin ($type) {
  @keyframes progress-#{$type}-type-ripple {
    0% {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 100%;
      opacity: 1;
    }
    66% {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
    }
    100% {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
    }
  }
}

@mixin progress-type-mixin ($type) {
  @include m($type) {
    @include b(progress-text) {
      color: map-get($--progress-indicator-color, 'outside');
    }
    $fill-color: map-get($--progress-fill-color, $type);
    @include b(progress-icon) {
      fill: $fill-color;
      @include m(as-text) {
        color: map-get($--progress-indicator-color, 'outside');
      }
    }
    @include b(progress-graph) {
      @include b(progress-graph-circle) {
        @include b(progress-graph-circle-fill) {
          stroke: $fill-color;
        }
      }
      @include b(progress-graph-line) {
        @include b(progress-graph-line-rail) {
          @include b(progress-graph-line-fill) {
            background-color: $fill-color;
            @include m(processing) {
              &::after {
                content: '';
                background-image: linear-gradient(90deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .3) 100%);
                animation: progress-#{$type}-type-ripple 3s $fast-in-cubic-bezier infinite;
              }
            }
          }
        }
        @include b(progress-graph-line-indicator) {
          background-color: $fill-color;
        }
      }
    }
  }
}

@include themes-mixin {
  @include progress-animation-mixin('default');
  @include progress-animation-mixin('success');
  @include progress-animation-mixin('warning');
  @include progress-animation-mixin('error');
  @include progress-animation-mixin('info');
  @include b(progress) {
    display: inline-block;
    @include m(line) {
      width: 100%;
      @include b(progress-content) {
        display: flex;
        align-items: center;
        @include b(progress-graph) {
          flex: 1;
        }
      }
      @include b(progress-custom-content) {
        margin-left: 14px;
      }
      @include b(progress-icon) {
        width: 30px;
        padding-left: 14px;
        height: 18px;
        line-height: 18px;
        font-size: 18px;
        transition: fill .3s $default-cubic-bezier;
        @include m(as-text) {
          text-align: center;
          width: 40px;
          font-size: 14px;
          padding-left: 4px;
        }
      }
      @include b(progress-text) {
        white-space: nowrap;
        font-weight: 700;
        line-height: 24px;
        width: 60px;
        @include e(percentage) {
          font-size: 14px;
          margin-left: 14px;
        }
        @include e(unit) {
          font-size: 14px;
        }
      }
    }
    @include m(circle) {
      width: 120px;
      @include b(progress-custom-content) {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      @include b(progress-text) {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        display: flex;
        align-items: center;
        color: inherit;
        font-size: 36px;
      }
      @include b(progress-icon) {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        display: flex;
        align-items: center;
        color: inherit;
        font-size: 36px;
      }
      @include b(progress-text) {
        white-space: nowrap;
        font-weight: 700;
        transition: color .3s $default-cubic-bezier;
        // color: rgba(98, 187, 252, 1);
        @include e(percentage) {
          color: inherit;
          font-size: 28px;
        }
        @include e(unit) {
          color: inherit;
          font-size: 24px;
          margin-left: 6px;
        }
      }
    }
    @include m(multiple-circle) {
      width: 200px;
      color: inherit;
      @include b(progress-text) {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    @include progress-type-mixin('default');
    @include progress-type-mixin('info');
    @include progress-type-mixin('success');
    @include progress-type-mixin('warning');
    @include progress-type-mixin('error');
    @include b(progress-content) {
      position: relative;
    }
    @include b(progress-graph) {
      position: relative;
      @include b(progress-graph-circle) {
        vertical-align: bottom;
        @include b(progress-graph-circle-rail) {
          transition: stroke .3s $default-cubic-bezier;
          stroke: $--progress-rail-color;
        }
        @include b(progress-graph-circle-fill) {
          transition: stroke .3s $default-cubic-bezier, stroke-dasharray .3s $default-cubic-bezier;
        }
      }
      @include b(progress-graph-line) {
        @include m(indicator-inside) {
          @include b(progress-graph-line-rail) {
            height: 21px;
            border-radius: 10.5px;
            @include b(progress-graph-line-fill) {
              height: 21px;
              border-radius: 10.5px;
            }
          }
          @include b(progress-graph-line-indicator) {
            background-color: none;
            color: map-get($--progress-indicator-color, 'inside');
            transition: color .3s $default-cubic-bezier;
            white-space: nowrap;
            text-align: right;
            font-weight: 700;
            margin-left: 14px;
            margin-right: 14px; 
            height: 21px;
            font-size: 14px;
            line-height: 21px;
          }
        }
        @include m(indicator-inside-label) {
          height: 21px;
          display: flex;
          align-items: center;
          @include b(progress-graph-line-rail) {
            transition: background-color .3s $default-cubic-bezier, right .2s $default-cubic-bezier;
            flex: 1;
          }
          @include b(progress-graph-line-indicator) {
            transform: translateZ(0); // to avoid strange offset
            display: flex;
            vertical-align: center;
            transition: right .2s $default-cubic-bezier, color .3s $default-cubic-bezier;
            height: 21px;
            line-height: 21px;
            padding: 0 10px;
            border-radius: 10.5px;
            position: absolute;
            color: map-get($--progress-indicator-color, 'inside');
            white-space: nowrap;
            font-weight: 700;
            font-size: 14px;
          }
        }
        @include b(progress-graph-line-rail) {
          position: relative;
          overflow: hidden;
          height: 10px;
          background-color: $--progress-rail-color;
          transition: background-color .3s $default-cubic-bezier;
          border-radius: 5px;
          @include b(progress-graph-line-fill) {
            position: relative;
            border-radius: 5px;
            height: 10px;
            width: 100%;
            max-width: 0%;
            transition: background-color .3s $default-cubic-bezier, max-width .2s $default-cubic-bezier;
          }
        }
      }
    }
  }
}