![cover](https://user-images.githubusercontent.com/11075892/97261110-24978d80-1859-11eb-97db-8797a15222d2.png)

# vue3-progress-bar

[![license](https://img.shields.io/npm/l/vue3-progress-bar?color=%2351bff4)](https://revolunet.mit-license.org/) [![npm](https://img.shields.io/npm/v/vue3-progress-bar?color=%2333efc7)](https://www.npmjs.com/package/vue3-progress-bar) [![downloads](https://img.shields.io/npm/dm/vue3-progress-bar?color=%23ad43a7)](https://www.npmjs.com/package/vue3-progress-bar)

A vue3 component of progress bar.

一款 vue3 的进度条组件

## Install

```shell
$ npm i vue3-progress-bar
```

## Usage

`main.js`

```js
import Vue3ProgressBar from "vue3-progress-bar";

const options = {
  position: "fixed",
  height: "3px",
  color: "#8bf6c7",
};

createApp(App).use(Vue3ProgressBar, options).mount("#app");
```

`App.vue`

```vue
<template>
  <vue3-progress-bar />
  <!-- Set it on the top -->
</template>

<script>
export default {
  name: "App",
  created() {
    this.$progress.start();
  },
};
</script>
```

## Quick Development

```shell
$ npm install -g @vue/cli # OR yarn global add @vue/cli

$ vue create demo # select vue 3 preset

$ cd demo # cd demo then install and use
```