Vue 3 Simple Progress Bar

This is a light-weight simple progress bar with minimal variations. Designed for Vue 3.

Attributes

| Name | Type | Default Value | Description | |-----------------|---------|---------------|------------------------------------| | color | String | #17a2b8 | Ex: red, #ddddd, rgb(255, 120, 45) | | height | Number | 16 | Converts to pixel(px) | | current-value | Number | 20 | Range is 0-100 | | animation | Boolean | true | To animate, strip must be true | | strip | Boolean | true | |

Note : The progress bar takes parent container width.

Install

npm install vue-3-simple-progress-bar

Usage

<template>
    <div style="width:40%">
        <progress-bar></progress-bar>
    </div>
    <div style="width:40%; margin-top:20px">
        <progress-bar current-value="50" height="5" color="#3eb750" :strip="true" :animation="false"></progress-bar>
    </div>
</template>

<script setup>
import ProgressBar from "vue-3-simple-progress-bar";
</script>