Progress 进度条
在有限空间内，循环播放同一类型的图片、文字等内容。
基础用法
用于展示操作进度，告知用户当前状态和预期。
60%
50%
满
展开查看
vue
<template>
<div style="width: 640px;padding: 20px 0;">
<tass-progress color="#918fc0" :percent='60' select="on"></tass-progress>
<tass-progress color="#C0B2FE" :percent='50' select="on"></tass-progress>
<tass-progress color="#ADA9BB" :percent='100' select="on"></tass-progress>
<tass-progress color="#8888d0" :percent='80' status="warning" select="on"></tass-progress>
<tass-progress color="#8D80FC" :percent='40' status="success" select="on"></tass-progress>
</div>
</template>
百分比内显
百分比不占用额外控件，适用于文件上传等场景。
60%
100%
满
80%
40%
展开查看
vue
<template>
<div style="width: 640px;padding: 20px 0;">
<tass-progress color="#918fc0" :percent='60' select="on" type="in"></tass-progress>
<tass-progress color="#595d83" :percent='100' select="on" type="in"></tass-progress>
<tass-progress color="#C0B2FE" :percent='80' select="on" type="in"></tass-progress>
<tass-progress color="#ADA9BB" :percent='40' select="on" type="in"></tass-progress>
</div>
</template>
环形进度条
可以通过控制 svg 的 stroke-dasharray 属性值来达到控制圆环进度的变化。
50%
展开查看
vue
<template>
<div style="width: 640px;padding: 20px 0;">
<tass-progress color="#373271" :percent='50'></tass-progress>
<tass-progress color="#ADA9BB" :percent='90' status="warning"></tass-progress>
<tass-progress color="#8888d0 " :percent='100' status="success"></tass-progress>
</div>
</template>