Skip to content

GlitchProgress 故障进度条 ​

故障进度条组件融合了故障艺术效果的进度指示器,适合在赛博朋克风格的界面中展示加载、上传、下载等进度。

基本用法 ​

50%
vue
<template>
  <cyber-glitch-progress :progress="50" />
</template>

不同方向 ​

50%


50%
vue
<template>
  <cyber-glitch-progress :progress="50" direction="horizontal" />
  <cyber-glitch-progress :progress="50" direction="vertical" />
</template>

不确定状态 ​

vue
<template>
  <cyber-glitch-progress indeterminate />
</template>

自定义颜色 ​

100%
75%
50%
25%
vue
<template>
  <cyber-glitch-progress :progress="100" color="#02c54d" />
  <cyber-glitch-progress :progress="75" color="#00a6dc" />
  <cyber-glitch-progress :progress="50" color="#ff9900" />
  <cyber-glitch-progress :progress="25" color="#ff013c" />
</template>

故障强度 ​

80%
80%
80%
vue
<template>
  <cyber-glitch-progress :progress="80" :glitch-intensity="1" />
  <cyber-glitch-progress :progress="80" :glitch-intensity="5" />
  <cyber-glitch-progress :progress="80" :glitch-intensity="10" />
</template>

属性 ​

属性名说明类型可选值默认值
progress进度值(百分比)number0-1000
direction进度条方向stringhorizontal / verticalhorizontal
glitchIntensity故障效果强度number1-105
indeterminate是否为不确定状态boolean—false
color进度条颜色string—#00e6f6
showText是否显示进度文本boolean—true

事件 ​

事件名说明回调参数
change进度变化事件value: number

Relcased under the Mit Lincense.