https://github.com/tahq69/vue-loading

Loading bar for Vue.js apps using axios
https://github.com/tahq69/vue-loading

axios crip loader loading loading-bar vue vue-component vuejs2

Last synced: about 1 month ago
JSON representation

Loading bar for Vue.js apps using axios

• Host: GitHub
• URL: https://github.com/tahq69/vue-loading
• Owner: tahq69
• License: mit
• Created: 2017-06-18T19:06:46.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-09T13:44:24.000Z (over 6 years ago)
• Last Synced: 2024-09-30T12:41:29.796Z (about 2 months ago)
• Topics: axios, crip, loader, loading, loading-bar, vue, vue-component, vuejs2
• Language: Vue
• Size: 984 KB
• Stars: 17
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# crip-vue-loading

> A Vue.js project to wrap axios and display global loading bar of http requests.

For more details read [documentation with examples](http://rawgit.com/tahq69/vue-loading/master/index.html)

## Usage

### Install

```bash

> npm i -S crip-vue-loading

```

### Setup

```javascript

import Vue from "vue"

import CripLoading from "crip-vue-loading"

import axios from "axios"

// Install component in to Vue instance and inject in to axios.

Vue.use(CripLoading, {axios})

// If you use "vue-router" and do not disable `applyOnRouter` option

// make sure you install plugin before router:

// https://github.com/vuejs/vue-router/issues/315

```

### Display loading bar

```vue

// App.vue

  


    


      


        Save

      

    


  


  import axios from 'axios'

  

  export default {

    methods: {

      async save (e, timeout = 0) {

        try {

          // simply call axios to save or request data and loading bar will

          // show up while response is not received from server.

          await axios.get(`http://www.fakeresponse.com/api/?sleep=${timeout}`)

        } catch (err) {

          console.error(err)

        }

      },

    },

  }

```

## TODO:

- Add algorithm with exponential progression instead of current linear;

## Build Setup

```bash

# install dependencies and serve with hot reload at localhost:8080

> npm i && npm run dev

```

## Release steps

```bash

> npm run release

```