Progress Bar

Progress bar component

Install

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

Getting Starting

How to use component

Parameters

| Props | Type | Values | Default | |-----------------|------------------|------------------------------------------------|-------------------| | val | Number | 0 - max | 0 | | max | Number | Any number | 100 | | size | Number | String | tiny, small, medium, large, huge, massive, {n} | 10 | | borderProgress | String | CSS | 1px solid #D9D9D9 | | 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 |

Usage

<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/vue-progress-bar';

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

License

MIT © Poeta Digital