☘ A vue3 component of progress bar the custom colors are supported 一款 vue3 进度条组件 支持自定义喜欢的颜色
vue3-progress
A vue3 progress bar component in which custom colors are supported
一款 vue3 进度条组件 支持自定义喜欢的颜色
This Vue Component is now Type Script Compatible!
Demo
Install
$ npm i vue3-progress
Usage
main.js
import Vue3Progress from "vue3-progress";
const options = {
position: "fixed",
height: "3px",
// color: "<Your Color>",
};
createApp(App).use(Vue3Progress, options).mount("#app");
App.vue
<template>
<div id="app">
<vue3-progress />
<router-view />
</div>
</template>
<script>
export default {
name: "App",
mounted() {
this.$progress.finish();
},
created() {
this.$progress.start();
this.$router.beforeEach((to, from, next) => {
this.$progress.start();
next();
});
this.$router.afterEach((to, from) => {
this.$progress.finish();
});
},
};
</script>
APIs
this.$progress.start() // start the loading
this.$progress.finish() // finish the loading
this.$progress.height(4) // resize the height of loading bar to 4px