Progress.mdx

title
Progress 进度条

示例

import { Progress } from '@tarojsx/ui'; import { useHarmonicIntervalFn } from 'react-use'; import { UI } from '@/ui';

<Progress />

{() => { const [percent, setPercent] = React.useState(0); useHarmonicIntervalFn(() => setPercent(Math.round((Date.now() / 100) % 100)), 1000); return ; }}

<Progress isHidePercent />

{() => { const [percent, setPercent] = React.useState(0); useHarmonicIntervalFn(() => setPercent(Math.round((Date.now() / 100) % 100)), 1000); return ; }}

<Progress strokeWidth={6} />
<Progress strokeWidth={8} />
<Progress strokeWidth={10} />

{() => { const [percent, setPercent] = React.useState(0); useHarmonicIntervalFn(() => setPercent(Math.round((Date.now() / 100) % 100)), 1000); return (

); }}

<Progress />
<Progress transitionDuration={0} />
<Progress transitionDuration={0.75} />

{() => { const [percent, setPercent] = React.useState(0); useHarmonicIntervalFn(() => setPercent(Math.round((Date.now() / 100) % 100)), 1000); return (

); }}

<Progress color='#FF4949' />
<Progress color='#13CE66' />
<Progress color='#FFC82C' />

{() => { const [percent, setPercent] = React.useState(0); useHarmonicIntervalFn(() => setPercent(Math.round((Date.now() / 100) % 100)), 1000); return (

); }}

<AtProgress status='error' />
<AtProgress status='progress' />
<AtProgress status='success' />

{() => { const [percent, setPercent] = React.useState(0); useHarmonicIntervalFn(() => setPercent(Math.round((Date.now() / 100) % 100)), 1000); return (

); }}

参数	说明	类型	默认值
transitionDuration	动画过渡时间, 单位: 秒.	number	0.3

API

• Taro UI 文档
• <Progress />
• ProgressProps