naive-ui/styles/Progress.scss

@import "./mixins/mixins.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-text-color, 'outside');
    }
    $fill-color: map-get($--progress-fill-color, $type);
    @include b(progress-icon) {
      @include b(icon) {
        fill: $fill-color;
      }
      @include m(as-text) {
        color: map-get($--progress-indicator-text-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: $--progress-line-processing-background-image;
                animation: progress-#{$type}-type-ripple 2s $--n-ease-out-cubic-bezier infinite;
              }
            }
          }
        }
        @include b(progress-graph-line-indicator) {
          background-color: $fill-color;
        }
      }
    }
  }
}

@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 themes-mixin {
  @include b(progress) {
    @include once {
      display: inline-block;
      @include m(line) {
        width: 100%;
        display: block;
        @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 $--n-ease-in-out-cubic-bezier,
            color .3s $--n-ease-in-out-cubic-bezier;
          @include m(as-text) {
            text-align: center;
            width: 40px;
            font-size: 14px;
            padding-left: 4px;
          }
        }
      }
      @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;
          transition: color .3s $--n-ease-in-out-cubic-bezier;
        }
        @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: $--n-strong-weight;
          transition: color .3s $--n-ease-in-out-cubic-bezier;
          @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) {
          transition: color .3s $--n-ease-in-out-cubic-bezier;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      @include b(progress-content) {
        position: relative;
      }
    }
    @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-graph) {
      @include once {
        position: relative;
      }
      @include b(progress-graph-circle) {
        @include once {
          svg {
            vertical-align: bottom;
          }
          @include b(progress-graph-circle-fill) {
            transition: stroke .3s $--n-ease-in-out-cubic-bezier, stroke-dasharray .3s $--n-ease-in-out-cubic-bezier;
          }
        }
        @include b(progress-graph-circle-rail) {
          @include once {
            transition: stroke .3s $--n-ease-in-out-cubic-bezier;
            overflow: hidden;
          }
          stroke: $--progress-rail-color;
        }
      }
      @include b(progress-graph-line) {
        @include m(indicator-inside) {
          @include once {
            @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) {
            @include once {
              background-color: transparent;
              transition: color .3s $--n-ease-in-out-cubic-bezier;
              white-space: nowrap;
              text-align: right;
              font-weight: $--n-strong-weight;
              margin-left: 14px;
              margin-right: 14px; 
              height: 21px;
              font-size: 14px;
              line-height: 21px;
            }
            color: map-get($--progress-indicator-text-color, 'inside');
          }
        }
        @include m(indicator-inside-label) {
          @include once {
            height: 21px;
            display: flex;
            align-items: center;
            @include b(progress-graph-line-rail) {
              transition: background-color .3s $--n-ease-in-out-cubic-bezier, right .2s $--n-ease-in-out-cubic-bezier;
              flex: 1;
            }
          }
          @include b(progress-graph-line-indicator) {
            @include once {
              transform: translateZ(0); // to avoid strange offset
              display: flex;
              vertical-align: middle;
              transition: right .2s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
              height: 21px;
              line-height: 21px;
              padding: 0 10px;
              border-radius: 10.5px;
              position: absolute;
              white-space: nowrap;
              font-weight: $--n-strong-weight;
              font-size: 14px;
            }
            color: map-get($--progress-indicator-text-color, 'inside');
          }
        }
        @include b(progress-graph-line-rail) {
          @include once {
            position: relative;
            overflow: hidden;
            height: 10px;
            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 $--n-ease-in-out-cubic-bezier, max-width .2s $--n-ease-in-out-cubic-bezier;
            }
          }
          background-color: $--progress-rail-color;
          transition: background-color .3s $--n-ease-in-out-cubic-bezier;
        }
      }
    }
  }
}