--- order: 15 title: zh-CN: 自定义进度条样式 en-US: Customize Progress Bar --- ## zh-CN 使用 `progress` 属性自定义进度条样式。 ## en-US Use `progress` for customize progress bar. ```tsx import { UploadOutlined } from '@ant-design/icons'; import type { UploadProps } from 'antd'; import { Button, message, Upload } from 'antd'; import React from 'react'; const props: UploadProps = { name: 'file', action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', headers: { authorization: 'authorization-text', }, onChange(info) { if (info.file.status !== 'uploading') { console.log(info.file, info.fileList); } if (info.file.status === 'done') { message.success(`${info.file.name} file uploaded successfully`); } else if (info.file.status === 'error') { message.error(`${info.file.name} file upload failed.`); } }, progress: { strokeColor: { '0%': '#108ee9', '100%': '#87d068', }, strokeWidth: 3, format: percent => percent && `${parseFloat(percent.toFixed(2))}%`, }, }; const App: React.FC = () => ( <Upload {...props}> <Button icon={<UploadOutlined />}>Click to Upload</Button> </Upload> ); export default App; ```