https://github.com/meloalright/vue-ins-progress-bar

Rainbow progress bar Vue component in instagram style 🌈 Instagram 风格的 Vue 彩虹进度条组件
https://github.com/meloalright/vue-ins-progress-bar

vue

Last synced: 3 months ago
JSON representation

Rainbow progress bar Vue component in instagram style 🌈 Instagram 风格的 Vue 彩虹进度条组件

• Host: GitHub
• URL: https://github.com/meloalright/vue-ins-progress-bar
• Owner: meloalright
• Created: 2018-07-08T12:25:16.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-02-01T13:42:57.000Z (almost 2 years ago)
• Last Synced: 2024-07-13T10:23:14.330Z (4 months ago)
• Topics: vue
• Language: Vue
• Homepage: https://meloalright.github.io/vue-ins-progress-bar/
• Size: 888 KB
• Stars: 333
• Watchers: 9
• Forks: 32
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![slogan](https://user-images.githubusercontent.com/11075892/42421484-e620f0d8-8308-11e8-8b6c-0e659eadfcd3.png)     

   

   

# vue-ins-progress-bar    

[![license](https://img.shields.io/npm/l/vue-ins-progress-bar?color=%2351bff4)](https://revolunet.mit-license.org/) [![npm](https://img.shields.io/npm/v/vue-ins-progress-bar?color=%2333efc7)](https://www.npmjs.com/package/vue-ins-progress-bar) [![downloads](https://img.shields.io/npm/dm/vue-ins-progress-bar?color=%23ad43a7)](https://www.npmjs.com/package/vue-ins-progress-bar) [![ts](https://img.shields.io/badge/ts-supported-ff69b4)](https://github.com/meloalright/vue-ins-progress-bar/tree/master/types/index.d.ts)

   

`a vue component of ins-style progress bar`   

   

`一款 ins 风格的 vue 进度条组件`   

   

## Demo    

    

[Live Demo](https://meloalright.github.io/vue-ins-progress-bar/)   

   

## Install    

    

```shell

$ npm i vue-ins-progress-bar   

```

   

## Usage    

   

`main.js`   

   

```JavaScript

import VueInsProgressBar from 'vue-ins-progress-bar'

const options = {

  position: 'fixed',

  show: true,

  height: '3px'

}

Vue.use(VueInsProgressBar, options)

```

    

    

    

`App.vue`    

    

```vue    

  


    

    

  


export default {

  name: 'App',

  mounted () {

    this.$insProgress.finish()

  },

  created () {

    this.$insProgress.start()

    this.$router.beforeEach((to, from, next) => {

      this.$insProgress.start()

      next()

    })

    this.$router.afterEach((to, from) => {

      this.$insProgress.finish()

    })

  }

}

```

   

## APIs   

   

```JavaScript

this.$insProgress.start() // start the loading

```

   

```JavaScript

this.$insProgress.finish() // finish the loading

```

   

```JavaScript

this.$insProgress.height(4) // resize the height of loading bar to 4px

```

   

   

## Browsers Support  

   

`Modern browsers and Internet Explorer 9+ (IE9 purple)`   

   

   

## Source    

   

Repository: [vue-ins-progress-bar](https://github.com/meloalright/vue-ins-progress-bar)      

   

Contributors: [contributors](https://github.com/meloalright/vue-ins-progress-bar/graphs/contributors)   

   

Author: [meloalright](https://github.com/meloalright)   

   

   

## Popularity    

   

[![downloads](https://img.shields.io/npm/dm/vue-ins-progress-bar?color=%23ad43a7)](https://www.npmjs.com/package/vue-ins-progress-bar)

   

   

## ChangeLog    

   

Documented in [Releases](https://github.com/meloalright/vue-ins-progress-bar/releases)   

## License   

   

[MIT](https://opensource.org/licenses/MIT)