- Notifications
You must be signed in to change notification settings - Fork2
marcoschulte/vue3-progress
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A vue3 plugin to show a progress bar while waiting for something.
Find a demo athttps://vue3-progress-demo.netlify.app/.
npm install @marcoschulte/vue3-progressAdd plugin
// main.tsimport{createApp}from'vue';importAppfrom'./App.vue';import{Vue3ProgressPlugin}from'@marcoschulte/vue3-progress';createApp(App).use(Vue3ProgressPlugin).mount('#app');
Import style
// in an .scss file@import"~@marcoschulte/vue3-progress/dist/";// alternatively the pre-compiled css can be imported from @marcoschulte/vue3-progress/dist/index.css
Add progress bar component
<!-- App.vue --><template><vue3-progress-bar></vue3-progress-bar><!-- snip --></template>
There are different ways to use the plugin
import{useProgress}from'@marcoschulte/vue3-progress';// via useProgress()constprogress=useProgress().start();progress.finish();// via global propertyconstprogress=this.$progress.start();progress.finish();
Alternatively the progress plugin can be attached to aPromise:
constpromise:Promise<any>=loadUsers();constattached=useProgess().attach(promise);constthisIsTrue=attached===promise;
// the plugin tracks how many "progresses" are active.// progress.finish() can safely be called multiple timesconstprogress1=useProgress().start();// progress bar appearsconstprogress2=useProgress().start();progress1.finish();progress1.finish();// progress bar is still shown, calling multiple times is safeprogress2.finish();// progress bar disappears
useProgress() can be used from everywhere, not only from vue functional components such assetup.This is possible because a reference to the plugins instance is globally registered. This behavior can be deactivatedthrough installing the plugin as.use(Vue3ProgressPlugin, {disableGlobalInstance: true}). The plugin will now use vue'sinject/provide mechanism.
import{ProgressFinisher,useProgress}from'@marcoschulte/vue3-progress';constprogresses=[]asProgressFinisher[];axios.interceptors.request.use(config=>{progresses.push(useProgress().start());returnconfig;});axios.interceptors.response.use(resp=>{progresses.pop()?.finish();returnresp;},(error)=>{progresses.pop()?.finish();returnPromise.reject(error);});
Some scss variables are exposed which can be customized as follows. CheckProgressBar.vue for all variables.
$vue3-progress-bar-color:#ff0000;@import"~@marcoschulte/vue3-progress/dist/";
Alternatively the css classes can be overriden in your own style.
If customizing the style is not sufficient, you can easily write your own progress bar component instead of using the provided one.The trickling effect can be reused if wanted, it is provided as a composable. CheckProgressBar.vue as a reference to create your own.