Vue Progressbar

import VueProgressBar from 'vue-progressbar';

const VueProgressBar = require('vue-progressbar');

import Vue from 'vue';
import VueProgressBar from 'vue-progressbar';

// Configure options
const options = {
  color: '#bffaf3',
  failedColor: '#874b4b',
  thickness: '5px',
  transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
  },
  autoRevert: true,
  location: 'top',
  inverse: false
};

// Install plugin
Vue.use(VueProgressBar, options);

// Use in components
export default {
  mounted() {
    this.$Progress.start();
    // Simulate work
    setTimeout(() => {
      this.$Progress.finish();
    }, 2000);
  }
}

/**
 * Vue plugin install function
 * @param Vue - Vue constructor
 * @param options - Configuration options object
 */
function install(Vue, options = {});

/**
 * Start progress bar animation
 * @param time - Duration in milliseconds (default: 3000)
 */
$Progress.start(time);

/**
 * Complete progress bar to 100% and hide
 */
$Progress.finish();

/**
 * Set progress bar to failed state and hide
 */
$Progress.fail();

/**
 * Pause progress bar animation
 */
$Progress.pause();

/**
 * Hide progress bar with transition
 */
$Progress.hide();

/**
 * Set progress to specific percentage
 * @param num - Percentage value (0-100)
 */
$Progress.set(num);

/**
 * Get current progress percentage
 * @returns Current percentage value
 */
$Progress.get();

/**
 * Increase progress by specified amount
 * @param num - Amount to increase
 */
$Progress.increase(num);

/**
 * Decrease progress by specified amount
 * @param num - Amount to decrease
 */
$Progress.decrease(num);

/**
 * Set progress bar color permanently
 * @param color - CSS color value
 */
$Progress.setColor(color);

/**
 * Set fail state color permanently
 * @param color - CSS color value
 */
$Progress.setFailColor(color);

/**
 * Set progress bar location permanently
 * @param loc - Location ('top', 'bottom', 'left', 'right')
 */
$Progress.setLocation(loc);

/**
 * Set transition settings permanently
 * @param transition - Transition configuration object
 */
$Progress.setTransition(transition);

/**
 * Set progress bar color temporarily
 * @param color - CSS color value
 */
$Progress.tempColor(color);

/**
 * Set fail state color temporarily
 * @param color - CSS color value
 */
$Progress.tempFailColor(color);

/**
 * Set progress bar location temporarily
 * @param loc - Location ('top', 'bottom', 'left', 'right')
 */
$Progress.tempLocation(loc);

/**
 * Set transition settings temporarily
 * @param transition - Transition configuration object
 */
$Progress.tempTransition(transition);

/**
 * Revert all temporary changes if autoRevert is enabled
 */
$Progress.revert();

/**
 * Revert temporary color change
 */
$Progress.revertColor();

/**
 * Revert temporary fail color change
 */
$Progress.revertFailColor();

/**
 * Revert temporary location change
 */
$Progress.revertLocation();

/**
 * Revert temporary transition change
 */
$Progress.revertTransition();

/**
 * Parse meta configuration from vue-router
 * @param meta - Meta configuration object with func array
 */
$Progress.parseMeta(meta);

// In router configuration
export default [
  {
    path: '/dashboard',
    name: 'dashboard',
    component: Dashboard,
    meta: {
      progress: {
        func: [
          { call: 'color', modifier: 'temp', argument: '#ffb000' },
          { call: 'fail', modifier: 'temp', argument: '#6e0000' },
          { call: 'location', modifier: 'temp', argument: 'top' },
          { call: 'transition', modifier: 'temp', argument: { speed: '1.5s', opacity: '0.6s', termination: 400 } }
        ]
      }
    }
  }
];

// In App.vue
export default {
  created() {
    this.$router.beforeEach((to, from, next) => {
      if (to.meta.progress !== undefined) {
        this.$Progress.parseMeta(to.meta.progress);
      }
      this.$Progress.start();
      next();
    });
    
    this.$router.afterEach((to, from) => {
      this.$Progress.finish();
    });
  }
}

interface ProgressOptions {
  /** Whether progress can succeed (default: true) */
  canSuccess: boolean;
  /** Whether progress bar is visible (default: false) */
  show: boolean;
  /** Progress bar color (default: '#73ccec') */
  color: string;
  /** CSS position (default: 'fixed') */
  position: string;
  /** Failed state color (default: 'red') */
  failedColor: string;
  /** Progress bar thickness (default: '2px') */
  thickness: string;
  /** Transition configuration */
  transition: {
    /** Animation speed (default: '0.2s') */
    speed: string;
    /** Opacity transition (default: '0.6s') */
    opacity: string;
    /** Hide delay in ms (default: 300) */
    termination: number;
  };
  /** Auto-revert temporary changes (default: true) */
  autoRevert: boolean;
  /** Bar location - 'top', 'bottom', 'left', 'right' (default: 'top') */
  location: string;
  /** Inverse direction (default: false) */
  inverse: boolean;
  /** Auto-finish when near 95% (default: true) */
  autoFinish: boolean;
}

interface MetaProgress {
  progress: {
    func: MetaFunction[];
  };
}

interface MetaFunction {
  /** Method to call: 'color', 'fail', 'location', 'transition' */
  call: string;
  /** Modifier: 'set' for permanent, 'temp' for temporary */
  modifier: string;
  /** Value to set (string for color/location, object for transition) */
  argument: string | object;
}

// Available on window object
window.VueProgressBarEventBus.RADON_LOADING_BAR.percent; // Current progress
window.VueProgressBarEventBus.RADON_LOADING_BAR.options; // Current options

import axios from 'axios';
import app from '../main'; // Vue instance

const instance = axios.create({
  baseURL: '/api'
});

instance.interceptors.request.use(config => {
  app.$Progress.start();
  return config;
});

instance.interceptors.response.use(response => {
  app.$Progress.finish();
  return response;
});