Poeta Digital Progress Bar

A simple, flexible progress bar.

Install

$ npm install @poetadigital/progress-bar --save-dev

Usage

Global

In main.js of Vue projects

import PProgressBar from '@poetadigital/progress-bar';
import App from './App.vue';

Vue.use(PProgressBar);

new Vue({
  render: (h) => h(App),
}).$mount('#app');

In App.vue, you can use PProgressBar component

<template>
  <div class="app">
    <PProgressBar
        class="custom-progress-bar"
        barBorderRadius="100"
        size="huge"
        val="50"
        textPosition="middle"
        text="50%"
    />
    <span> 50% </span>
  </div>
</template>

<script>
export default {
    name: 'App',
}
</script>

Import Component

<template>
  <div class="app">
    <PProgressBar
        class="custom-progress-bar"
        barBorderRadius="100"
        size="huge"
        val="50"
        textPosition="middle"
        text="50%"
    />
    <span> 50% </span>
  </div>
</template>

<script>
import PProgressBar from '@poetadigital/progress-bar';

export default {
    name: 'App',
    components: { PProgressBar }
}
</script>

Props

Props	Type	Values	Default
val	Number	0 - max	0
max	Number	Any number	100
size	Number	String	tiny, small, medium, large, huge, massive, {n}
borderProgress	String	CSS	1px solid #D9D9D9
barColor	String	Color	#0085FF
barColor	String	Color	#0085FF
barTransition	String	CSS	all 0.5s ease
barBorderRadius	Number	0 - max	0
spacing	Number	Any Number	4
text	String	Text to display	empty
textAlign	String	left, right, center	center
textPosition	String	bottom, top, middle, inside	bottom
textSize	Number	Any Number	13
textFgColor	String	Color	#222222

Download Details:

Source Code: https://www.npmjs.com/package/@poetadigital/progress-bar

#vue #vuejs #javascript