Progressbar

Progress loading bar.

Usage

Simple Usage

preview

<template>
  <p-progressbar value="15" />
  <p-progressbar value="25" />
  <p-progressbar value="50" />
  <p-progressbar value="75" />
  <p-progressbar value="100" />
</template>

With Input Range

preview

<template>
  <p-input-range v-model="value" />
  <p-progressbar :value="value" />
</template>

<script lang="ts" setup>
const value = ref(50)
</script>

Success State

preview

<template>
  <p-progressbar success />
</template>

Error State

preview

<template>
  <p-progressbar error />
</template>

Indeterminate Mode

preview

<template>
  <p-progressbar indeterminate />
</template>

API

Props

Props	Type	Default	Description
min	Number	0	Lowest progress value
max	Number	100	Highest progress value
value	Number	-	Progress value
indeterminate	Boolean	false	Enable indterminate mode

Slots

Name	Description
There no slots here

Events

Name	Arguments	Description
There no props here