z-progress-loading

基于 canvas 实现的加载进度条 vue 组件。（现在支持基于 dom 实现的配置）

Features

• 可作为 loading 组件使用
• 可作为 pregress-bar 组件使用
• 可作为音乐播放进度条使用

Preview

对应 demo 代码在 examples 目录

• 预览 z-progress-loading

• 在线试用

How to use

npm install --save z-progress-loading

<template>
  <div #app>
    <ZProgressLoading :progress="progress" :start="start" :config="config" />
  </div>
</template>

<script>
import ZProgressLoading from 'z-progress-loading';
export default {
  components: {
    ZProgressLoading
  },
  // ...
}
</script>

Start

# 本地调试 localhost:3000
npm start # 或 npm run serve

# 编译 产物位于 dist 目录
npm run build

# 发布
npm run release

Params Config

• progress: 传入进度，取值 0 - 100 之间；若不需要可始终传入 0 或 100。

• start: 控制开始暂停。

• config: 样式配置；elem 的概念是每一个小矩形；

  • renderer: 渲染方式，默认为 "dom"，可选 "canvas"

  • elemWidth: 单个小矩形宽度

  • elemMinHeight: 小矩形最小高度

  • elemMaxHeight: 小矩形最大高度；最小最大高度相同时，将不会跳动

  • elemDeltaHeight: 初始时不同小矩形的高度差值

  • spacing: 小矩形间距；间距为 0 时将连成不间断的进度条

  • step: 小矩形跳动时高度变化的步长；默认为 1；值越大跳动时变化越快

  • bgColor: 未达到进度的小矩形颜色

  • foreColor: 已达到进度的小矩形颜色

  • lineCap: 线条裁切方式，默认为直角 "square"，可选圆角 "round"

Recently Updated

Changelog available here.

License

The project is licensed under the terms of MIT license.