Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/meloalright/vue-ins-progress-bar below:

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

a vue component of ins-style progress bar

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

Live Demo

$ npm i vue-ins-progress-bar   

main.js

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

const options = {
  position: 'fixed',
  show: true,
  height: '3px'
}

Vue.use(VueInsProgressBar, options)

App.vue

<template>
  <div id="app">
    <router-view/>
    <vue-ins-progress-bar></vue-ins-progress-bar>
  </div>
</template>

<script>
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()
    })
  }
}
</script>

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

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

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

Modern browsers and Internet Explorer 9+ (IE9 purple)

Repository: vue-ins-progress-bar      

Contributors: contributors

Author: muzishuiji

Documented in Releases

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4