@lipn/progress-bar NPM

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>

Showcase

@everything-registry/sub-chunk-551 @zalastax/nolb-_lip

1.0.0

3 years ago