tntd 2.8.0-beta.2 → 2.8.0-beta.4

package/es/popover/style/index.less

@@ -0,0 +1,206 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@popover-prefix-cls: ~'@{ant-prefix}-popover';
+
+.@{popover-prefix-cls} {
+  .reset-component;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: @zindex-popover;
+  font-weight: normal;
+  white-space: normal;
+  text-align: left;
+  cursor: auto;
+  user-select: text;
+
+  &::after {
+    position: absolute;
+    background: fade(@white, 1%);
+    content: '';
+  }
+
+  &-hidden {
+    display: none;
+  }
+
+  // Offset the popover to account for the popover arrow
+  &-placement-top,
+  &-placement-topLeft,
+  &-placement-topRight {
+    padding-bottom: @popover-distance;
+  }
+
+  &-placement-right,
+  &-placement-rightTop,
+  &-placement-rightBottom {
+    padding-left: @popover-distance;
+  }
+
+  &-placement-bottom,
+  &-placement-bottomLeft,
+  &-placement-bottomRight {
+    padding-top: @popover-distance;
+  }
+
+  &-placement-left,
+  &-placement-leftTop,
+  &-placement-leftBottom {
+    padding-right: @popover-distance;
+  }
+
+  &-inner {
+    background-color: @popover-bg;
+    background-clip: padding-box;
+    border-radius: @border-radius-base;
+    box-shadow: @box-shadow-base;
+    box-shadow: ~'0 0 8px @{shadow-color} \9';
+  }
+
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    /* IE10+ */
+    &-inner {
+      box-shadow: @box-shadow-base;
+    }
+  }
+
+  &-title {
+    min-width: @popover-min-width;
+    min-height: 32px;
+    margin: 0; // reset heading margin
+    padding: 5px @padding-md 4px;
+    color: @heading-color;
+    font-weight: 500;
+    border-bottom: 1px solid @border-color-split;
+  }
+
+  &-inner-content {
+    padding: 12px @padding-md;
+    color: @popover-color;
+  }
+
+  &-message {
+    position: relative;
+    padding: 4px 0 12px;
+    color: @popover-color;
+    font-size: @font-size-base;
+    > .@{iconfont-css-prefix} {
+      position: absolute;
+      top: 8px; // 4px for padding-top, 4px for vertical middle;
+      color: @warning-color;
+      // font-size: @font-size-base;
+      font-size: 16px;
+    }
+    &-title {
+      padding-left: calc(@font-size-base + 8px);
+    }
+  }
+
+  &-buttons {
+    margin-bottom: 4px;
+    text-align: right;
+    button {
+      margin-left: 8px;
+    }
+  }
+
+  // Arrows
+  // .popover-arrow is outer, .popover-arrow:after is inner
+
+  &-arrow {
+    position: absolute;
+    display: block;
+    width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
+    height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
+    background: transparent;
+    border-style: solid;
+    border-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2;
+    transform: rotate(45deg);
+  }
+
+  &-placement-top > &-content > &-arrow,
+  &-placement-topLeft > &-content > &-arrow,
+  &-placement-topRight > &-content > &-arrow {
+    bottom: calc(@popover-distance - @popover-arrow-width + 2.2px);
+    border-top-color: transparent;
+    border-right-color: @popover-bg;
+    border-bottom-color: @popover-bg;
+    border-left-color: transparent;
+    box-shadow: 3px 3px 7px fade(@black, 7%);
+  }
+  &-placement-top > &-content > &-arrow {
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+  }
+  &-placement-topLeft > &-content > &-arrow {
+    left: 16px;
+  }
+  &-placement-topRight > &-content > &-arrow {
+    right: 16px;
+  }
+
+  &-placement-right > &-content > &-arrow,
+  &-placement-rightTop > &-content > &-arrow,
+  &-placement-rightBottom > &-content > &-arrow {
+    left: calc(@popover-distance - @popover-arrow-width + 2px);
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: @popover-bg;
+    border-left-color: @popover-bg;
+    box-shadow: -3px 3px 7px fade(@black, 7%);
+  }
+  &-placement-right > &-content > &-arrow {
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+  &-placement-rightTop > &-content > &-arrow {
+    top: 12px;
+  }
+  &-placement-rightBottom > &-content > &-arrow {
+    bottom: 12px;
+  }
+
+  &-placement-bottom > &-content > &-arrow,
+  &-placement-bottomLeft > &-content > &-arrow,
+  &-placement-bottomRight > &-content > &-arrow {
+    top: calc(@popover-distance - @popover-arrow-width + 2px);
+    border-top-color: @popover-bg;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: @popover-bg;
+    box-shadow: -2px -2px 5px fade(@black, 6%);
+  }
+  &-placement-bottom > &-content > &-arrow {
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+  }
+  &-placement-bottomLeft > &-content > &-arrow {
+    left: 16px;
+  }
+  &-placement-bottomRight > &-content > &-arrow {
+    right: 16px;
+  }
+
+  &-placement-left > &-content > &-arrow,
+  &-placement-leftTop > &-content > &-arrow,
+  &-placement-leftBottom > &-content > &-arrow {
+    right: calc(@popover-distance - @popover-arrow-width + 2px);
+    border-top-color: @popover-bg;
+    border-right-color: @popover-bg;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+    box-shadow: 3px -3px 7px fade(@black, 7%);
+  }
+  &-placement-left > &-content > &-arrow {
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+  &-placement-leftTop > &-content > &-arrow {
+    top: 12px;
+  }
+  &-placement-leftBottom > &-content > &-arrow {
+    bottom: 12px;
+  }
+}

package/es/progress/index.js

@@ -1,4 +1,4 @@
 import Progress from 'antd/es/progress';
-import 'antd/es/progress/style';
+import './style';
 export * from 'antd/es/progress';
 export default Progress;

package/es/progress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,kBAAkB,CAAA;AAEvC,OAAO,wBAAwB,CAAA;AAE/B,cAAc,kBAAkB,CAAA;AAEhC,eAAe,QAAQ,CAAA","sourcesContent":["import Progress from 'antd/es/progress'\n\nimport 'antd/es/progress/style'\n\nexport * from 'antd/es/progress'\n\nexport default Progress\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,kBAAkB,CAAA;AAEvC,OAAO,SAAS,CAAA;AAEhB,cAAc,kBAAkB,CAAA;AAEhC,eAAe,QAAQ,CAAA","sourcesContent":["import Progress from 'antd/es/progress'\n\nimport './style'\n\nexport * from 'antd/es/progress'\n\nexport default Progress\n"]}

package/es/progress/progress.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import { ConfigConsumer } from 'antd/es/config-provider';
+import AntdProgress from 'antd/es/progress';
+import classNames from 'classnames';
+import Ellipsis from '../ellipsis';
+import Icon from '../icon';
+import './progress.less';
+export * from 'antd/es/tooltip';
+const iconMap = {
+  line: {
+    success: 'check-circle',
+    exception: 'close-circle'
+  },
+  circle: {
+    success: 'check',
+    exception: 'close'
+  }
+};
+const ifPercentBottom = (type, percentPosition) => {
+  return type === 'line' && percentPosition === 'bottom';
+};
+const percentTransform = percent => {
+  return percent >= 100 ? 100 : percent <= 0 ? 0 : percent;
+};
+const themeStrokeColor = (status, strokeColor, percent) => {
+  return status !== 'success' && status !== 'exception' && !strokeColor && percent !== 100 ? 'var(--blue-5)' : '';
+};
+const Progress = props => {
+  const {
+    className,
+    type = 'line',
+    percentPosition = 'right',
+    percent = 0,
+    format,
+    size,
+    label,
+    width = 132,
+    status,
+    halfCircle,
+    gapDegree = props.halfCircle ? 135 : props.gapDegree,
+    strokeColor,
+    strokeWidth = 7
+  } = props;
+  const _percent = percentTransform(percent);
+  const _strokeColor = themeStrokeColor(status, strokeColor, _percent);
+  return React.createElement(ConfigConsumer, null, ({
+    getPrefixCls
+  }) => {
+    const prefixCls = getPrefixCls('progress');
+    const CusLabelOrPercent = props => {
+      const {
+        type,
+        theme
+      } = props;
+      const labelPercentClassName = classNames(`${prefixCls}-percent-bottom`, {
+        [`${prefixCls}-percent-bottom-${size}`]: size === 'small',
+        [`${prefixCls}-percent-bottom-${type}`]: type === 'line'
+      });
+      const showIcon = status => React.createElement(Icon, {
+        type: `${iconMap[type][status]}`,
+        theme: theme,
+        className: classNames({
+          [`${labelPercentClassName} ${labelPercentClassName}-${status || 'success'}`]: type === 'line'
+        })
+      });
+      const showPercent = React.createElement("div", {
+        className: labelPercentClassName
+      }, format ? format === null || format === void 0 ? void 0 : format(_percent) : _percent + '%');
+      let displayContent;
+      if (status === 'success' || status === 'exception') {
+        displayContent = showIcon(status);
+      } else if (status === 'normal' || status === 'active') {
+        displayContent = showPercent;
+      } else {
+        // 如果状态为空
+        displayContent = _percent === 100 ? showIcon('success') : showPercent;
+      }
+      return displayContent;
+    };
+    const CusCircleAndDashboardFormat = props => {
+      const {
+        widthNum
+      } = props;
+      return React.createElement("div", {
+        className: `${prefixCls}-cus-format`
+      }, !!label && React.createElement(Ellipsis, {
+        className: `${prefixCls}-cus-format-label`,
+        title: label,
+        widthLimit: widthNum <= 64 ? widthNum : 'calc(100% - 50px)',
+        placement: widthNum <= 64 ? 'bottom' : 'top'
+      }), React.createElement(CusLabelOrPercent, {
+        type: "circle",
+        theme: "outlined"
+      }));
+    };
+    //line
+    const LineProgress = () => React.createElement(AntdProgress, Object.assign({
+      strokeColor: _strokeColor
+    }, props, {
+      className: classNames('tnt-progress', className, {
+        [`${prefixCls}-percent-bottom`]: percentPosition === 'bottom'
+      })
+    }));
+    //circle,dashboard (额外新增label和半圆选项)
+    const CircleAndDashboardProgress = () => {
+      const widthNum = Number(String(width).split('px').shift());
+      return React.createElement(AntdProgress, Object.assign({
+        gapDegree: gapDegree,
+        strokeColor: _strokeColor,
+        strokeWidth: strokeWidth
+      }, props, {
+        type: halfCircle ? 'dashboard' : type,
+        className: classNames('tnt-progress', `${prefixCls}-circle-progress`, className, {
+          [`${prefixCls}-small-circle`]: widthNum <= 64 && label,
+          [`${prefixCls}-large-circle`]: widthNum > 64 && label,
+          [`${prefixCls}-small-half-circle`]: halfCircle && widthNum <= 64 && label,
+          [`${prefixCls}-large-half-circle`]: halfCircle && widthNum > 64 && label
+        }),
+        format: () => React.createElement(CusCircleAndDashboardFormat, {
+          widthNum: widthNum
+        })
+      }));
+    };
+    const progressMap = {
+      line: React.createElement(LineProgress, null),
+      circle: React.createElement(CircleAndDashboardProgress, null),
+      dashboard: React.createElement(CircleAndDashboardProgress, null)
+    };
+    return progressMap[type];
+  });
+};
+export default Progress;

package/es/progress/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../src/progress/progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport type { ProgressProps } from 'antd/es/progress'\nimport type { ThemeType } from 'antd/es/icon'\nimport { ConfigConsumer } from 'antd/es/config-provider'\nimport AntdProgress from 'antd/es/progress'\nimport classNames from 'classnames'\nimport Ellipsis from '../ellipsis'\nimport Icon from '../icon'\nimport './progress.less'\nexport * from 'antd/es/tooltip'\n\ninterface ExtendsProgress {\n  percentPosition?: 'bottom' | 'right'\n  label?: React.ReactNode\n  halfCircle?: boolean\n}\nconst iconMap = {\n  line: {\n    success: 'check-circle',\n    exception: 'close-circle',\n  },\n  circle: {\n    success: 'check',\n    exception: 'close',\n  },\n}\nconst ifPercentBottom = (type: string, percentPosition: string) => {\n  return type === 'line' && percentPosition === 'bottom'\n}\nconst percentTransform = (percent: number) => {\n  return percent >= 100 ? 100 : percent <= 0 ? 0 : percent\n}\n\nconst themeStrokeColor = (status?: string, strokeColor?: string | object, percent?: number) => {\n  return status !== 'success' && status !== 'exception' && !strokeColor && percent !== 100\n    ? 'var(--blue-5)'\n    : ''\n}\n\nconst Progress: React.FC<ProgressProps & ExtendsProgress> = (props) => {\n  const {\n    className,\n    type = 'line',\n    percentPosition = 'right',\n    percent = 0,\n    format,\n    size,\n    label,\n    width = 132,\n    status,\n    halfCircle,\n    gapDegree = props.halfCircle ? 135 : props.gapDegree,\n    strokeColor,\n    strokeWidth = 7,\n  } = props\n  const _percent = percentTransform(percent)\n  const _strokeColor = themeStrokeColor(status, strokeColor, _percent)\n  return (\n    <ConfigConsumer>\n      {({ getPrefixCls }) => {\n        const prefixCls = getPrefixCls('progress')\n\n        const CusLabelOrPercent = (props: { type: 'line' | 'circle'; theme?: ThemeType }) => {\n          const { type, theme } = props\n          const labelPercentClassName = classNames(`${prefixCls}-percent-bottom`, {\n            [`${prefixCls}-percent-bottom-${size}`]: size === 'small',\n            [`${prefixCls}-percent-bottom-${type}`]: type === 'line',\n          })\n\n          const showIcon = (status: 'success' | 'exception') => (\n            <Icon\n              type={`${iconMap[type][status]}`}\n              theme={theme}\n              className={classNames({\n                [`${labelPercentClassName} ${labelPercentClassName}-${status || 'success'}`]:\n                  type === 'line',\n              })}\n            />\n          )\n          const showPercent = (\n            <div className={labelPercentClassName}>\n              {format ? format?.(_percent) : _percent + '%'}\n            </div>\n          )\n\n          let displayContent\n          if (status === 'success' || status === 'exception') {\n            displayContent = showIcon(status)\n          } else if (status === 'normal' || status === 'active') {\n            displayContent = showPercent\n          } else {\n            // 如果状态为空\n            displayContent = _percent === 100 ? showIcon('success') : showPercent\n          }\n          return displayContent\n        }\n\n        const CusCircleAndDashboardFormat = (props: { widthNum: number }) => {\n          const { widthNum } = props\n          return (\n            <div className={`${prefixCls}-cus-format`}>\n              {!!label && (\n                <Ellipsis\n                  className={`${prefixCls}-cus-format-label`}\n                  title={label}\n                  widthLimit={widthNum <= 64 ? widthNum : 'calc(100% - 50px)'}\n                  placement={widthNum <= 64 ? 'bottom' : 'top'}\n                />\n              )}\n              <CusLabelOrPercent type=\"circle\" theme=\"outlined\" />\n            </div>\n          )\n        }\n\n        //line\n        const LineProgress: React.FC = () => (\n          <AntdProgress\n            strokeColor={_strokeColor}\n            {...props}\n            className={classNames('tnt-progress', className, {\n              [`${prefixCls}-percent-bottom`]: percentPosition === 'bottom',\n            })}\n          />\n        )\n\n        //circle,dashboard (额外新增label和半圆选项)\n        const CircleAndDashboardProgress: React.FC = () => {\n          const widthNum = Number(String(width).split('px').shift())\n          return (\n            <AntdProgress\n              gapDegree={gapDegree}\n              strokeColor={_strokeColor}\n              strokeWidth={strokeWidth}\n              {...props}\n              type={halfCircle ? 'dashboard' : type}\n              className={classNames('tnt-progress', `${prefixCls}-circle-progress`, className, {\n                [`${prefixCls}-small-circle`]: widthNum <= 64 && label,\n                [`${prefixCls}-large-circle`]: widthNum > 64 && label,\n                [`${prefixCls}-small-half-circle`]: halfCircle && widthNum <= 64 && label,\n                [`${prefixCls}-large-half-circle`]: halfCircle && widthNum > 64 && label,\n              })}\n              format={() => <CusCircleAndDashboardFormat widthNum={widthNum} />}\n            />\n          )\n        }\n\n        const progressMap = {\n          line: <LineProgress />,\n          circle: <CircleAndDashboardProgress />,\n          dashboard: <CircleAndDashboardProgress />,\n        }\n        return progressMap[type]\n      }}\n    </ConfigConsumer>\n  )\n}\n\nexport default Progress\n"]}

package/es/progress/progress.less

@@ -0,0 +1,82 @@
+@import '../style/themes/index.less';
+@import '../style/mixins/index';
+@progress-prefix-cls: ~'@{ant-prefix}-progress';
+.tnt-progress.@{progress-prefix-cls} {
+    .ant-progress-text{
+    //   font-family: PingFang SC;
+      font-weight: 500;
+    }
+    .ant-progress-cus-format-label{
+      .ant-progress-cus-format-label{
+        padding-bottom: 4px;
+      }
+    }
+    &-percent-bottom{
+        .ant-progress-outer{
+          padding-right: 0;
+        }
+        .ant-progress-text{
+          width: 100%;
+          display: block;
+          text-align: right;
+          margin-left: 0;
+        }
+    }
+    &-circle-progress{
+      .@{progress-prefix-cls}-cus-format{
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    &-small-circle{
+      .ant-progress-text{
+        height: 100%;
+      }
+      .ant-progress-inner{
+        overflow:visible;
+      }
+      .tntd-ellipsis{
+        position: absolute;
+        bottom: -1.8em;
+        font-size: 0.75em;
+        // margin-bottom: 2px;
+        // color: #8B919E;
+        color:tint(@text-color, 50%);
+        font-family: Inter;
+        font-weight: 500;
+        text-align: center;
+      }
+    }
+    &-large-circle{
+      .ant-progress-text{
+        height: 100%;
+      }
+      .tntd-ellipsis{
+        font-size: 0.55em;
+        // margin-bottom: 2px;
+        color:tint(@text-color, 50%);
+        font-family: Inter;
+        font-weight: 500;
+        text-align: center;
+      }
+    }
+    &-small-half-circle{
+      .ant-progress-text{
+        height: 40%;
+      }
+      .tntd-ellipsis{
+        bottom: -1.5em;
+      }
+    }
+    &-large-half-circle{
+      .ant-progress-inner{
+        .ant-progress-text{
+          top: 42%
+        }
+      }
+    }
+}
+

package/es/progress/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/progress/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress/style/index.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAA;AAC/B,OAAO,cAAc,CAAA","sourcesContent":["import '../../style/index.less'\nimport './index.less'\n"]}

package/es/progress/style/index.less

@@ -0,0 +1,182 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@progress-prefix-cls: ~'@{ant-prefix}-progress';
+
+.@{progress-prefix-cls} {
+  .reset-component;
+
+  display: inline-block;
+
+  &-line {
+    position: relative;
+    width: 100%;
+    font-size: @font-size-base;
+  }
+
+  &-small&-line,
+  &-small&-line &-text .@{iconfont-css-prefix} {
+    font-size: @font-size-sm;
+  }
+
+  &-outer {
+    display: inline-block;
+    width: 100%;
+    margin-right: 0;
+    padding-right: 0;
+    .@{progress-prefix-cls}-show-info & {
+      margin-right: ~'calc(-2em - 8px)';
+      padding-right: ~'calc(2em + 8px)';
+    }
+  }
+
+  &-inner {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    vertical-align: middle;
+    background-color: @progress-remaining-color;
+    border-radius: @progress-radius;
+  }
+
+  &-circle-trail {
+    stroke: @progress-remaining-color;
+  }
+
+  &-circle-path {
+    animation: ~'@{ant-prefix}-progress-appear' 0.3s;
+  }
+
+  &-inner:not(.@{ant-prefix}-progress-circle-gradient) {
+    .@{ant-prefix}-progress-circle-path {
+      stroke: @progress-default-color;
+    }
+  }
+
+  &-success-bg,
+  &-bg {
+    position: relative;
+    background-color: @progress-default-color;
+    border-radius: @progress-radius;
+    transition: all 0.4s @ease-out-circ 0s;
+  }
+
+  &-success-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: @success-color;
+  }
+
+  &-text {
+    display: inline-block;
+    width: 2em;
+    margin-left: 8px;
+    color: @text-color-secondary;
+    font-size: 1em;
+    line-height: 1;
+    white-space: nowrap;
+    text-align: left;
+    vertical-align: middle;
+    word-break: normal;
+    .@{iconfont-css-prefix} {
+      font-size: @font-size-base;
+    }
+  }
+
+  &-status-active {
+    .@{progress-prefix-cls}-bg::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: @component-background;
+      border-radius: 10px;
+      opacity: 0;
+      animation: ~'@{ant-prefix}-progress-active' 2.4s @ease-out-quint infinite;
+      content: '';
+    }
+  }
+
+  &-status-exception {
+    .@{progress-prefix-cls}-bg {
+      background-color: @error-color;
+    }
+    .@{progress-prefix-cls}-text {
+      color: @error-color;
+    }
+  }
+
+  &-status-exception &-inner:not(.@{progress-prefix-cls}-circle-gradient) {
+    .@{progress-prefix-cls}-circle-path {
+      stroke: @error-color;
+    }
+  }
+
+  &-status-success {
+    .@{progress-prefix-cls}-bg {
+      background-color: @success-color;
+    }
+    .@{progress-prefix-cls}-text {
+      color: @success-color;
+    }
+  }
+
+  &-status-success &-inner:not(.@{progress-prefix-cls}-circle-gradient) {
+    .@{progress-prefix-cls}-circle-path {
+      stroke: @success-color;
+    }
+  }
+
+  &-circle &-inner {
+    position: relative;
+    line-height: 1;
+    background-color: transparent;
+  }
+
+  &-circle &-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    color: @progress-text-color;
+    line-height: 1;
+    white-space: normal;
+    text-align: center;
+    transform: translate(-50%, -50%);
+
+    .@{iconfont-css-prefix} {
+      font-size: 14 / 12em;
+    }
+  }
+
+  &-circle&-status-exception {
+    .@{progress-prefix-cls}-text {
+      color: @error-color;
+    }
+  }
+  &-circle&-status-success {
+    .@{progress-prefix-cls}-text {
+      color: @success-color;
+    }
+  }
+}
+
+@keyframes ~"@{ant-prefix}-progress-active" {
+  0% {
+    width: 0;
+    opacity: 0.1;
+  }
+  20% {
+    width: 0;
+    opacity: 0.5;
+  }
+  100% {
+    width: 100%;
+    opacity: 0;
+  }
+}