https://github.com/staskjs/vue-resource-progressbar-interceptor

Interceptor that ties a progressbar to all requests, that it is clear that something is loading
https://github.com/staskjs/vue-resource-progressbar-interceptor

Last synced: 19 days ago
JSON representation

Interceptor that ties a progressbar to all requests, that it is clear that something is loading

• Host: GitHub
• URL: https://github.com/staskjs/vue-resource-progressbar-interceptor
• Owner: staskjs
• Created: 2016-08-30T05:36:25.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-09-28T13:31:49.000Z (about 8 years ago)
• Last Synced: 2025-02-01T01:33:26.221Z (10 months ago)
• Language: JavaScript
• Size: 83 KB
• Stars: 64
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vue - vue-resource-progressbar-interceptor - Interceptor that ties a progressbar to all requests, that it is clear that something is loading. (Components & Libraries / UI Utilities)
• awesome-vue-refactor - vue-resource-progressbar-interceptor
• awesome-vue-zh - Vue资源,进度拦截 - 将进度条与所有请求联系起来的拦截器,很明显正在加载某些东西. (UI实用程序 / 杂)
• awesome-vuejs - vue-resource-progressbar-interceptor - resource that adds automated progressbar (that is up one line) to all http requests (Awesome Vue.js / Libraries & Plugins)
• awesome-vue - vue-resource-progressbar-interceptor - Interceptor that ties a progressbar to all requests, that it is clear that something is loading. (UI Utilities / Miscellaneous)

README

          
# vue-resource-progressbar-interceptor

Module attaches interceptors to vue instance which controls progressbar on top of the screen.

Your vue instance should have [this](https://github.com/hilongjw/vue-progressbar) `vue-progressbar` plugin installed and connected.

## Installation

    $ npm i vue-resource-progressbar-interceptor

Then in your code:

    const Vue = require('vue');

    const VueResource = require('vue-resource');

    const VueProgressBar = require('vue-progress-bar');

    const VueResourceProgressBarInterceptor = require('vue-resource-progressbar-interceptor');

    Vue.use(VueResource);

    Vue.use(VueProgressBar);

    Vue.use(VueResourceProgressBarInterceptor);

## Configuration

By default progressbar shows for every single request.

In order not to use progressbar for certain requests, use `showProgressBar` parameter in request.

Like this:

    Vue.http.get('/url', { showProgressBar: false })

Configuration options:

    Vue.use(VueResourceProgressBarInterceptor, {

      latencyThreshold: 100, // Number of ms before progressbar starts showing, 100 is default

      responseLatency: 50, // Number of ms before progressbar starts reacting to response, 50 is default

                           // Can be used to wait for more requests to kick in under single progress bar

    });

## Notes

This plugin was inspired by [this angular.js version](https://github.com/chieffancypants/angular-loading-bar).