diff --git a/src/config.json b/src/config.json
index 666def6196..0f1959164d 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1044,7 +1044,7 @@
           "author": "songsong"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Progress",
           "type": "component",
           "cName": "进度条",
diff --git a/src/packages/progress/demo.taro.tsx b/src/packages/progress/demo.taro.tsx
index 5308200e87..05faffc8cf 100644
--- a/src/packages/progress/demo.taro.tsx
+++ b/src/packages/progress/demo.taro.tsx
@@ -1,7 +1,5 @@
 import React from 'react'
-import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
-import { Cell } from '@nutui/nutui-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -12,6 +10,7 @@ import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
+import { harmonyAndRn, web } from '@/utils/platform-taro'
 
 const ProgressDemo = () => {
   const [translated] = useTranslate({
@@ -50,33 +49,32 @@ const ProgressDemo = () => {
   return (
     <>
       <Header />
-      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+      <ScrollView className={`demo ${web() ? 'web' : ''}`}>
         <View className="h2">{translated.basic}</View>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <View className="h2">{translated.customStyle}</View>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <View className="h2">{translated.noShowPercentage}</View>
-        <Cell>
-          <Demo3 />
-        </Cell>
-        <View className="h2">{translated.customContent}</View>
-        <Cell>
-          <Demo4 />
-        </Cell>
+        <Demo3 />
+        {!harmonyAndRn() && (
+          <>
+            <View className="h2">{translated.customContent}</View>
+            <Demo4 />
+          </>
+        )}
         <View className="h2">{translated.customSize}</View>
         <Demo5 />
         <View className="h2">{translated.statusDisplay}</View>
         <Demo6 />
+
         <View className="h2">{translated.dynamicChange}</View>
         <Demo7 />
-        <View className="h2">{translated.lazy}</View>
-        <Cell>
-          <Demo8 />
-        </Cell>
+        {!harmonyAndRn() && (
+          <>
+            <View className="h2">{translated.lazy}</View>
+            <Demo8 />
+          </>
+        )}
       </ScrollView>
     </>
   )
diff --git a/src/packages/progress/demo.tsx b/src/packages/progress/demo.tsx
index 373867889a..8742d579f0 100644
--- a/src/packages/progress/demo.tsx
+++ b/src/packages/progress/demo.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useTranslate } from '../../sites/assets/locale'
-import { Cell } from '@/packages/cell/cell'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
@@ -48,21 +47,13 @@ const ProgressDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <h2>{translated.customStyle}</h2>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <h2>{translated.noShowPercentage}</h2>
-        <Cell>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         <h2>{translated.customContent}</h2>
-        <Cell>
-          <Demo4 />
-        </Cell>
+        <Demo4 />
         <h2>{translated.customSize}</h2>
         <Demo5 />
         <h2>{translated.statusDisplay}</h2>
@@ -70,9 +61,7 @@ const ProgressDemo = () => {
         <h2>{translated.dynamicChange}</h2>
         <Demo7 />
         <h2>{translated.lazy}</h2>
-        <Cell align="center">
-          <Demo8 />
-        </Cell>
+        <Demo8 />
       </div>
     </>
   )
diff --git a/src/packages/progress/demos/h5/demo1.tsx b/src/packages/progress/demos/h5/demo1.tsx
index da817f698e..9c3617fd48 100644
--- a/src/packages/progress/demos/h5/demo1.tsx
+++ b/src/packages/progress/demos/h5/demo1.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react'
+import { Cell, Progress } from '@nutui/nutui-react'
 
 const Demo1 = () => {
-  return <Progress percent={30} />
+  return (
+    <Cell>
+      <Progress percent={30} />
+    </Cell>
+  )
 }
 export default Demo1
diff --git a/src/packages/progress/demos/h5/demo2.tsx b/src/packages/progress/demos/h5/demo2.tsx
index 540c554d4b..ef49c6067f 100644
--- a/src/packages/progress/demos/h5/demo2.tsx
+++ b/src/packages/progress/demos/h5/demo2.tsx
@@ -1,14 +1,16 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react'
+import { Progress, Cell } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (
-    <Progress
-      percent={30}
-      color="var(--nutui-color-primary)"
-      background="var(--nutui-brand-1)"
-      strokeWidth="15"
-    />
+    <Cell>
+      <Progress
+        percent={30}
+        color="var(--nutui-color-primary)"
+        background="var(--nutui-brand-1)"
+        strokeWidth="15"
+      />
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/progress/demos/h5/demo3.tsx b/src/packages/progress/demos/h5/demo3.tsx
index a1a8ac0101..5d1368ecdf 100644
--- a/src/packages/progress/demos/h5/demo3.tsx
+++ b/src/packages/progress/demos/h5/demo3.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react'
+import { Cell, Progress } from '@nutui/nutui-react'
 
 const Demo3 = () => {
-  return <Progress percent={50} showText />
+  return (
+    <Cell>
+      <Progress percent={50} showText />
+    </Cell>
+  )
 }
 export default Demo3
diff --git a/src/packages/progress/demos/h5/demo4.tsx b/src/packages/progress/demos/h5/demo4.tsx
index 376c8040af..393f2ec18b 100644
--- a/src/packages/progress/demos/h5/demo4.tsx
+++ b/src/packages/progress/demos/h5/demo4.tsx
@@ -1,15 +1,17 @@
 import React from 'react'
-import { Progress, Image } from '@nutui/nutui-react'
+import { Progress, Image, Cell } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <Progress percent={60} showText>
-      <Image
-        width="30px"
-        height="30px"
-        src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-      />
-    </Progress>
+    <Cell>
+      <Progress percent={60} showText>
+        <Image
+          width="30px"
+          height="30px"
+          src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+        />
+      </Progress>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/progress/demos/h5/demo8.tsx b/src/packages/progress/demos/h5/demo8.tsx
index 33ae6c3c4a..6e8af3eaf7 100644
--- a/src/packages/progress/demos/h5/demo8.tsx
+++ b/src/packages/progress/demos/h5/demo8.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react'
+import { Cell, Progress } from '@nutui/nutui-react'
 
 const Demo8 = () => {
-  return <Progress percent={30} lazy delay={500} />
+  return (
+    <Cell align="center">
+      <Progress percent={30} lazy delay={500} />
+    </Cell>
+  )
 }
 export default Demo8
diff --git a/src/packages/progress/demos/taro/demo1.tsx b/src/packages/progress/demos/taro/demo1.tsx
index a196ee8d24..a1c0566acf 100644
--- a/src/packages/progress/demos/taro/demo1.tsx
+++ b/src/packages/progress/demos/taro/demo1.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react-taro'
+import { Cell, Progress } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
-  return <Progress percent={30} />
+  return (
+    <Cell>
+      <Progress percent={30} />
+    </Cell>
+  )
 }
 export default Demo1
diff --git a/src/packages/progress/demos/taro/demo2.tsx b/src/packages/progress/demos/taro/demo2.tsx
index 165bb53917..eca916fadf 100644
--- a/src/packages/progress/demos/taro/demo2.tsx
+++ b/src/packages/progress/demos/taro/demo2.tsx
@@ -1,14 +1,17 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react-taro'
+import { Cell, Progress } from '@nutui/nutui-react-taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo2 = () => {
   return (
-    <Progress
-      percent={30}
-      color="var(--nutui-color-primary)"
-      background="var(--nutui-brand-1)"
-      strokeWidth="15"
-    />
+    <Cell>
+      <Progress
+        percent={30}
+        color={harmonyAndRn() ? '#FF0F23' : 'var(--nutui-color-primary)'}
+        background={harmonyAndRn() ? '#FFEAE8' : 'var(--nutui-brand-1)'}
+        strokeWidth="15"
+      />
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/progress/demos/taro/demo3.tsx b/src/packages/progress/demos/taro/demo3.tsx
index 444838a990..8b0d6af10a 100644
--- a/src/packages/progress/demos/taro/demo3.tsx
+++ b/src/packages/progress/demos/taro/demo3.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react-taro'
+import { Cell, Progress } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
-  return <Progress percent={50} showText />
+  return (
+    <Cell>
+      <Progress percent={50} showText />
+    </Cell>
+  )
 }
 export default Demo3
diff --git a/src/packages/progress/demos/taro/demo4.tsx b/src/packages/progress/demos/taro/demo4.tsx
index 4cd774d925..24d6b7995d 100644
--- a/src/packages/progress/demos/taro/demo4.tsx
+++ b/src/packages/progress/demos/taro/demo4.tsx
@@ -1,15 +1,17 @@
 import React from 'react'
-import { Progress, Image } from '@nutui/nutui-react-taro'
+import { Progress, Image, Cell } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
   return (
-    <Progress percent={60} showText>
-      <Image
-        width="30px"
-        height="30px"
-        src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-      />
-    </Progress>
+    <Cell>
+      <Progress percent={60} showText>
+        <Image
+          width="30px"
+          height="30px"
+          src="https://img12.360buyimg.com/imagetools/jfs/t1/229362/18/22746/11607/669f8bfeF5fcbeaab/d4162bbf29bb1b00.png"
+        />
+      </Progress>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/progress/demos/taro/demo6.tsx b/src/packages/progress/demos/taro/demo6.tsx
index 91ef3a5d8a..60ac132b88 100644
--- a/src/packages/progress/demos/taro/demo6.tsx
+++ b/src/packages/progress/demos/taro/demo6.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Progress, Cell } from '@nutui/nutui-react-taro'
 import { Checked, Tips } from '@nutui/icons-react-taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo6 = () => {
   return (
@@ -8,21 +9,32 @@ const Demo6 = () => {
       <Cell>
         <Progress
           percent={30}
-          color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
+          color={
+            harmonyAndRn()
+              ? 'blue'
+              : 'linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)'
+          }
           animated
         />
       </Cell>
       <Cell align="center">
         <Progress percent={100} />
-        <Checked color="green" style={{ margin: '0 5px' }} />
+        {!harmonyAndRn() && (
+          <Checked color="green" style={{ margin: '0 5px' }} />
+        )}
       </Cell>
       <Cell align="center">
-        <Progress
-          percent={100}
-          color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
-          strokeWidth="15"
-        />
-        <Tips color="red" style={{ margin: '0 5px' }} />
+        <Progress percent={100} color="#AAFF00" strokeWidth="15" />
+        {!harmonyAndRn() && (
+          <Tips
+            color={
+              harmonyAndRn()
+                ? 'red'
+                : 'linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)'
+            }
+            style={{ margin: '0 5px' }}
+          />
+        )}
       </Cell>
     </>
   )
diff --git a/src/packages/progress/demos/taro/demo7.tsx b/src/packages/progress/demos/taro/demo7.tsx
index e9087600aa..5d683d408c 100644
--- a/src/packages/progress/demos/taro/demo7.tsx
+++ b/src/packages/progress/demos/taro/demo7.tsx
@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
-import { Progress, Cell, Button, Toast } from '@nutui/nutui-react-taro'
+import { Cell, Button, Toast, Progress } from '@nutui/nutui-react-taro'
+import { Text } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo7 = () => {
   const [value, setValue] = useState(0)
@@ -7,22 +10,24 @@ const Demo7 = () => {
   const [toastMsg, setToastMsg] = useState('')
   return (
     <Cell.Group>
-      <Toast
-        type="text"
-        visible={show}
-        content={toastMsg}
-        onClose={() => {
-          setShow(false)
-        }}
-      />
+      {!harmonyAndRn() && (
+        <Toast
+          type="text"
+          visible={show}
+          content={toastMsg}
+          onClose={() => {
+            setShow(false)
+          }}
+        />
+      )}
+
       <Cell align="center">
         <Progress percent={value} />
-        <span style={{ margin: '0 5px' }}>{value}%</span>
       </Cell>
       <Cell align="center">
         <Button
           type="default"
-          style={{ margin: 8 }}
+          style={{ marginRight: pxTransform(16) }}
           onClick={() => {
             if (value <= 0) {
               setToastMsg('进度已为0')
@@ -35,7 +40,6 @@ const Demo7 = () => {
         </Button>
         <Button
           type="primary"
-          style={{ margin: 8 }}
           onClick={() => {
             if (value >= 100) {
               setToastMsg('进度已为100%')
@@ -46,6 +50,7 @@ const Demo7 = () => {
         >
           增加
         </Button>
+        <Text style={{ marginLeft: pxTransform(16) }}>{value}%</Text>
       </Cell>
     </Cell.Group>
   )
diff --git a/src/packages/progress/demos/taro/demo8.tsx b/src/packages/progress/demos/taro/demo8.tsx
index 652fe66cea..071d65ad3b 100644
--- a/src/packages/progress/demos/taro/demo8.tsx
+++ b/src/packages/progress/demos/taro/demo8.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react-taro'
+import { Progress, Cell } from '@nutui/nutui-react-taro'
 
 const Demo8 = () => {
-  return <Progress percent={30} delay={500} lazy />
+  return (
+    <Cell>
+      <Progress percent={30} delay={500} lazy />
+    </Cell>
+  )
 }
 export default Demo8
diff --git a/src/packages/progress/progress.harmony.css b/src/packages/progress/progress.harmony.css
index 2fef8db7bf..00a5f8da97 100644
--- a/src/packages/progress/progress.harmony.css
+++ b/src/packages/progress/progress.harmony.css
@@ -8,7 +8,7 @@
   flex: auto;
   border-radius: 12px;
   height: 10px;
-  background: #F7F8FC;
+  background: #f5f6fa;
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";
@@ -27,7 +27,7 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: 12px;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
+  background-color: #ff0f23;
 }
 .nut-progress-text {
   display: flex;
@@ -36,10 +36,11 @@
   top: -4px;
   bottom: -4px;
   transition: all 0.4s;
-  transform: translate(-50%);
 }
 .nut-progress-text-inner {
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
@@ -48,7 +49,7 @@
   border-radius: 5px;
   font-size: 9px;
   line-height: 1;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
+  background: #ff0f23;
 }
 @keyframes progressActive {
   0% {
diff --git a/src/packages/progress/progress.scss b/src/packages/progress/progress.scss
index 5eebd11a18..b7d865ad3a 100644
--- a/src/packages/progress/progress.scss
+++ b/src/packages/progress/progress.scss
@@ -29,7 +29,7 @@
     justify-content: center;
     transition: all 0.4s;
     border-radius: $progress-border-radius;
-    background: $progress-color;
+    background-color: $progress-color;
   }
 
   &-text {
@@ -39,10 +39,12 @@
     top: $progress-text-position-top;
     bottom: $progress-text-position-bottom;
     transition: all 0.4s;
-    transform: translate(-50%);
+    // transform: translate(-50%);
 
     &-inner {
       display: flex;
+      flex-direction: row;
+      justify-content: center;
       align-items: center;
       height: 100%;
       width: 100%;
diff --git a/src/packages/progress/progress.taro.tsx b/src/packages/progress/progress.taro.tsx
index ff529046c0..f93da6218a 100644
--- a/src/packages/progress/progress.taro.tsx
+++ b/src/packages/progress/progress.taro.tsx
@@ -1,9 +1,12 @@
 import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
 import classNames from 'classnames'
 import Taro, { PageInstance } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useRtl } from '../configprovider/index.taro'
 import useUuid from '@/utils/use-uuid'
+import { harmony, harmonyAndRn, rn, web } from '@/utils/platform-taro'
 
 export interface ProgressProps extends BasicComponent {
   percent: number
@@ -54,15 +57,20 @@ export const Progress: FunctionComponent<
   })
 
   const stylesOuter: React.CSSProperties = {
-    height: `${strokeWidth}px`,
-    background,
+    width: '100%',
+    backgroundColor: background,
   }
 
   const [displayPercent, setDispalyPercent] = useState(0)
 
   const stylesInner: React.CSSProperties = {
     width: `${displayPercent}%`,
-    background: color,
+    backgroundColor: color || '#FF0F23',
+  }
+
+  if (strokeWidth) {
+    stylesOuter.height = pxTransform(Number(strokeWidth))
+    stylesInner.height = pxTransform(Number(strokeWidth))
   }
   const handlePercent = () => {
     let timer: any = null
@@ -74,7 +82,7 @@ export const Progress: FunctionComponent<
     }
 
     return () => {
-      lazy && resetObserver(Taro.getEnv())
+      lazy && resetObserver()
       timer && clearTimeout(timer)
     }
   }
@@ -87,8 +95,8 @@ export const Progress: FunctionComponent<
   const webObserver: any = useRef(null)
   const uuid = useUuid()
   const selector = `${classPrefix}-lazy-${uuid}`
-  const resetObserver = (env: string, observer: any = null) => {
-    if (env === 'WEB') {
+  const resetObserver = (observer: any = null) => {
+    if (web()) {
       webObserver.current.disconnect && webObserver.current.disconnect()
     } else {
       observer && observer.disconnect()
@@ -107,6 +115,7 @@ export const Progress: FunctionComponent<
   }, [intersecting])
   const handleWebObserver = () => {
     /// web环境
+
     if (lazy) {
       webObserver.current = new IntersectionObserver(
         (entires, self) => {
@@ -144,47 +153,90 @@ export const Progress: FunctionComponent<
   }
 
   useEffect(() => {
-    if (Taro.getEnv() === 'WEB') {
+    if (web()) {
       handleWebObserver()
-    } else {
+    } else if (!harmonyAndRn()) {
       handleOtherObserver()
     }
   }, [])
-
+  const getTextStyle = () => {
+    const value = harmony() ? '90%' : '99%'
+    return rtl ? { right: value } : { left: value }
+  }
+  const computeRight = () => {
+    if (children) {
+      return 0
+    }
+    if (!harmonyAndRn()) {
+      return Math.floor((`${percent}%`.length * 9) / 2)
+    }
+    if (rn()) {
+      return `${percent}%`.length * 9 + 4
+    }
+    return Math.floor((`${percent}%`.length * 9 + 4) / 2)
+  }
+  const computeInnerStyle = () => {
+    const style: any = {
+      backgroundColor: color || '#ff0f23',
+    }
+    if (harmonyAndRn()) {
+      style.width = harmony()
+        ? pxTransform(`${percent}%`.length * 9 + 4)
+        : `${percent}%`.length * 9 + 4
+    }
+    return style
+  }
   return (
-    <div
+    <View
       ref={progressRef}
       id={selector}
       className={classNames(classPrefix, className)}
       style={style}
       {...rest}
     >
-      <div className={`${classPrefix}-outer`} style={stylesOuter}>
-        <div className={classesInner} style={stylesInner}>
+      <View className={`${classPrefix}-outer`} style={stylesOuter}>
+        <View
+          className={classesInner}
+          style={{ ...stylesInner, position: 'relative' }}
+        >
           {showText && (
-            <div
-              className={`${classPrefix}-text`}
-              style={
-                rtl
-                  ? { right: `${displayPercent}%` }
-                  : { left: `${displayPercent}%` }
-              }
+            <View
+              style={{
+                position: 'relative',
+                [rtl ? 'left' : 'right']: computeRight(),
+              }}
             >
-              {children || (
-                <div
-                  className={`${classPrefix}-text-inner`}
-                  style={{
-                    background: color,
-                  }}
-                >
-                  {percent}%
-                </div>
-              )}
-            </div>
+              <View
+                className={`${classPrefix}-text`}
+                style={{
+                  ...getTextStyle(),
+                  height:
+                    // eslint-disable-next-line no-nested-ternary
+                    harmony()
+                      ? pxTransform(strokeWidth ? Number(strokeWidth) + 8 : 18)
+                      : strokeWidth
+                        ? Number(strokeWidth) + 8
+                        : 18,
+                  position: 'absolute',
+                  top: -(strokeWidth
+                    ? (Number(strokeWidth) + 8 - 9) / 2 + 5
+                    : 9),
+                }}
+              >
+                {children || (
+                  <View
+                    className={`${classPrefix}-text-inner`}
+                    style={computeInnerStyle()}
+                  >
+                    {`${percent}%`}
+                  </View>
+                )}
+              </View>
+            </View>
           )}
-        </div>
-      </div>
-    </div>
+        </View>
+      </View>
+    </View>
   )
 }
 
diff --git a/src/packages/progress/progress.tsx b/src/packages/progress/progress.tsx
index a47ec44fbd..902d6c3553 100644
--- a/src/packages/progress/progress.tsx
+++ b/src/packages/progress/progress.tsx
@@ -61,7 +61,7 @@ export const Progress: FunctionComponent<
 
   const stylesInner: React.CSSProperties = {
     width: `${displayPercent}%`,
-    background: color,
+    backgroundColor: color || '#FF0F23',
   }
 
   useEffect(() => {
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index ec25df8eea..2410dec893 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -1652,7 +1652,7 @@ $progress-text-color: var(
 ) !default;
 $progress-text-background: var(
   --nutui-progress-text-background,
-  $progress-color
+  #ff0f23
 ) !default;
 $progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
 $progress-text-font-size: var(--nutui-progress-text-font-size, 9px) !default;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 1a5d2002ee..e6c1da6599 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1625,10 +1625,7 @@ $popover-menu-item-padding: var(
 
 //progress（✅）
 $progress-height: var(--nutui-progress-height, 10px) !default;
-$progress-color: var(
-  --nutui-progress-color,
-  $color-primary-gradient-1
-) !default;
+$progress-color: var(--nutui-progress-color, #ff0f23) !default;
 $progress-background: var(
   --nutui-progress-background,
   $color-background
@@ -1640,7 +1637,7 @@ $progress-text-color: var(
 ) !default;
 $progress-text-background: var(
   --nutui-progress-text-background,
-  $progress-color
+  #ff0f23
 ) !default;
 $progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
 $progress-text-font-size: var(--nutui-progress-text-font-size, 9px) !default;