/z-progress-loading

Created with CodeSandbox

Primary LanguageVueMIT LicenseMIT

z-progress-loading

npm package npm download github license github language top github stars

NPM

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

Features

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

Preview

对应 demo 代码在 examples 目录

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.