Skip to content
Projects Vue.js Projects
Vue Radial Progress

Vue Radial Progress

Radial progress bar component for Vue.js

2.3K viewsAdded Jan 19, 2019

Radial progress bar component for Vue.js

Installation

npm install --save vue-radial-progress

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>

Vue.js Projects

A hand-picked collection of projects made with Vue.js: UI components, input elements, apps, plugins, examples and frameworks.

Newsletter

Get the best new Vue projects in your inbox.

© 2026 vuejsprojects.com