Progress bar
Vuetify component that shows a progress bar.
Dependencies
Install
yarn add @lipn/progress-bar
Use
- First of all, import the plugin.
import Vue from 'vue';
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import ProgressBar from 'progress-bar';
Vue.use(Vuetify);
Vue.use(ProgressBar);
new Vue({
el: '#app',
vuetify: new Vuetify(),
// Global access to the dialog via $root.$progressBar
mounted() {
this.$root.$progressBar = this.$refs.progressBar;
},
methods: {
save() {
this.$root.$progressBar.show({ rounded: false, height: 6, opacity: 0.3, color: "info" });
setTimeout(() => (this.$root.$progressBar.hide()), 3000)
}
}
};- Insert component where you want to use it:
<html>
<body>
<div id="app">
<v-app>
<!-- progress bar -->
<progress-bar ref="progressBar"></progress-bar>
<v-container>
<!-- rest of the code -->
</v-container>
</v-app>
</div>
</html>