Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: about 2 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 (almost 6 years ago)
Default Branch: master
Last Pushed: 2023-02-01T13:42:57.000Z (over 1 year ago)
Last Synced: 2024-03-24T01:43:05.948Z (2 months ago)
Topics: vue
Language: Vue
Homepage: https://meloalright.github.io/vue-ins-progress-bar/
Size: 888 KB
Stars: 334
Watchers: 9
Forks: 32
Open Issues: 3
Metadata Files:
- Readme: README.md

Lists

awesome-vue - vue-ins-progress-bar - A Vue component of ins-style progress bar 一款 ins 风格的 vue 进度条组件 (Components & Libraries / UI Components)
awesome-vue - vue-ins-progress-bar - A Vue component of ins-style progress bar 一款 ins 风格的 vue 进度条组件 (Components & Libraries / UI Components)
awesome-vue - vue-ins-progress-bar - A Vue component of ins-style progress bar 一款 ins 风格的 vue 进度条组件 (Components & Libraries / UI Components)
awesome - meloalright/vue-ins-progress-bar - Rainbow progress bar Vue component in instagram style 🌈 Instagram 风格的 Vue 彩虹进度条组件 (Vue)
awesome-stars - vue-ins-progress-bar
awesome-vue - vue-ins-progress-bar - A Vue component of ins-style progress bar 一款 ins 风格的 vue 进度条组件 (Components & Libraries / UI Components)
awesome-vue - vue-ins-progress-bar - A Vue component of ins-style progress bar 一款 ins 风格的 vue 进度条组件 (Components & Libraries / UI Components)
awesome-vue - vue-ins-progress-bar - A Vue component of ins-style progress bar 一款 ins 风格的 vue 进度条组件 (Components & Libraries / UI Components)
awesome-vue - vue-ins-progress-bar - A Vue component of ins-style progress bar 一款 ins 风格的 vue 进度条组件 (Components & Libraries / UI Components)

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)