VueJS Examples

Best VueJS Progress Indicator Components

A curated list of the best Progress Indicator libraries.

1. vue-progress-path

Progress bars and loading indicators that can take any form!

Live Demo

Step 1; Installation

npm i -S vue-progress-path
yarn add vue-progress-path

Step 2: Usage

import 'vue-progress-path/dist/vue-progress-path.css'
import VueProgress from 'vue-progress-path'

Vue.use(VueProgress, {
  // defaultShape: 'circle',
})

You can now use the <loading-progress> component.

CSS customization example

You can customize the progress components with CSS:

.vue-progress-path path {
  stroke-width: 12;
}

.vue-progress-path .progress {
  stroke: red;
}

.vue-progress-path .background {
  stroke: #edd;
}

Examples

Google Material Design-like spinner:

<loading-progress
  :progress="progress"
  :indeterminate="indeterminate"
  :counter-clockwise="counterClockwise"
  :hide-background="hideBackground"
  size="64"
  rotate
  fillDuration="2"
  rotationDuration="1"
/>

Semi-circle:

<loading-progress
  :progress="progress"
  :indeterminate="indeterminate"
  :counter-clockwise="counterClockwise"
  :hide-background="hideBackground"
  shape="semicircle"
  size="64"
/>

Custom SVG path:

<loading-progress
  :progress="progress"
  :indeterminate="indeterminate"
  :counter-clockwise="counterClockwise"
  :hide-background="hideBackground"
  shape="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
  size="180"
  fill-duration="2"
/>

Read more


2. vue-progressbar

vue-progressbar.

Check demo:
Demo

Requirements

Step 1: Installation

# npm
$ npm install vue-progressbar

#yarn
$ yarn add vue-progressbar

Step 2: Usage

main.js

import Vue from 'vue'
import VueProgressBar from 'vue-progressbar'
import App from './App'

const options = {
  color: '#bffaf3',
  failedColor: '#874b4b',
  thickness: '5px',
  transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
  },
  autoRevert: true,
  location: 'left',
  inverse: false
}

Vue.use(VueProgressBar, options)

new Vue({
  ...App
}).$mount('#app')

Read more


3. vue-radial-progress

A radial progress bar component for Vue.js. Uses SVG and javascript to animate a radial progress bar with a gradient.

Live Demo

Requirements

  • Vue.js ^2.0.0 (Compatible with Vue 1.0 or 2.0)
  • A module bundler such as webpack or use the minified version on its own.

Step 1: Installation

$ npm install --save vue-radial-progress

Step 2: Usage

<template>
  <radial-progress-bar :diameter="200"
                       :completed-steps="completedSteps"
                       :total-steps="totalSteps">
   <p>Total steps: {{ totalSteps }}</p>
   <p>Completed steps: {{ completedSteps }}</p>
  </radial-progress-bar>
</template>

<script>
import RadialProgressBar from 'vue-radial-progress'

export default {
  data () {
    return {
      completedSteps: 0,
      totalSteps: 10
    }
  },

  components: {
    RadialProgressBar
  }
}
</script>

Read more


4. vue-progress

Progressbar.js as a Vue Component

How to use:

Step 1: install

npm i vue-progress -S

Step 2: import as a vue plugin

import VueProgress from 'vue-progress'
Vue.use(VueProgress)

hello <progress-bar>

<template>
  <progress-bar type="line" ref="line" :options="options"></progress-bar>

  <!-- or -->
  <!-- <progress-bar type="line" ref="line" color="#007AFF" strokeWidth="0.5"></progress-bar> -->
</template>

<script>
  export default {
    data: {
      options: {
        color: '#007AFF',
        strokeWidth: 0.5
      }
    },
    mounted: function () {
      this.$refs.line.animate(1.0)
    }
  }
</script>

<style>
  html, body {
    margin: 0;
    padding: 0;
  }
</style>

Read more


Related Posts