Progress 进度条

展示进度

何时使用

在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。

• 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
• 当需要显示一个操作完成的百分比时。

import { HiProgress } from 'hi-kits/progress'

何时使用

<h-progress value="20"></h-progress>

Expand Copy Copy

显示字体进度

<h-progress value="60" showtext></h-progress>

Expand Copy Copy

自定义颜色/背景色

<h-progress value="40" color='green' showtext></h-progress>
<h-progress value="50" color='red' showtext background="#ffe4bc"></h-progress>
        

Expand Copy Copy

自定义宽度/高度/圆角/显示百分比

0.9

<h-progress value="90"
    class="auto"
    color='linear-gradient(
    268deg,#fa2c19 0%,#fa3f19 44.59259259%,#fa5919 83.40740741%,#fa6419 100%)'>
    <span>0.9</span>
</h-progress>

Expand Copy Copy