vue 斑马线进度条,渐变进度条

功能:

  • 自定义渐变(是否渐变,渐变颜色)
  • 自定义斑马线(角度,宽度)
  • 自定义百分比位置以及前缀文字、后缀文字
  • 自定义动画时间

1 进度条





vue 斑马线进度条,渐变进度条_第1张图片

动图(省略)

2 增加百分比显示,位置选择以及前缀后缀文字






默认效果:

vue 斑马线进度条,渐变进度条_第2张图片

改变斑马线角度:

vue 斑马线进度条,渐变进度条_第3张图片

改变斑马线宽度:

vue 斑马线进度条,渐变进度条_第4张图片

开启渐变:

vue 斑马线进度条,渐变进度条_第5张图片

改变百分比位置:

vue 斑马线进度条,渐变进度条_第6张图片

动图(省略)

你可能感兴趣的:(vue,css,scene,前端,vue.js,css)