Progress

Used to display the current progress of an operation.

?

Name	Category	Description	Type	Default
type	? Style	Progress bar type	'primary' | 'success' | 'info' | 'warning' | 'danger'	'primary'
variant	? Style	Fill pattern variant	'solid' | 'striped' | 'checkered'	'solid'
textInside	? Style	Whether to render text inside the bar	boolean	false
size	? Size	Progress bar size	'large' | 'default' | 'small'	'default'
strokeWidth	? Size	Custom progress bar height (in pixels)	number	0
color	? Color	Custom color, supports hex string or function	string | (percentage: number) => string	—
status	? State	Progress status, overrides type color	'success' | 'warning' | 'danger'	—
stripedFlow	? Behavior	Animated striped flow (only with variant="striped")	boolean	false
indeterminate	? Behavior	Indeterminate bouncing progress	boolean	false
showText	? Behavior	Whether to show percentage text	boolean	true
percentage	? Content	Percentage value (0-100), out-of-range values are clamped	number	0
format	? Content	Custom text format function	(percentage: number) => string	—
clampedPercentage	? Expose	Clamped percentage value (0-100)	number	—

Basic Usage

Set percentage to indicate current progress. The value is clamped between 0 and 100.

<template>
  <div class="demo-progress">
    <px-progress :percentage="50" />
    <px-progress :percentage="80" />
    <px-progress :percentage="100" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

Types

Use the type prop to set different colors.

<template>
  <div class="demo-progress">
    <px-progress :percentage="30" type="primary" />
    <px-progress :percentage="50" type="success" />
    <px-progress :percentage="60" type="info" />
    <px-progress :percentage="70" type="warning" />
    <px-progress :percentage="40" type="danger" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

Sizes

Three sizes available: large, default, and small.

<template>
  <div class="demo-progress">
    <px-progress :percentage="60" size="large" />
    <px-progress :percentage="60" />
    <px-progress :percentage="60" size="small" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

Text Inside

Use text-inside to place the percentage text inside the progress bar.

<template>
  <div class="demo-progress">
    <px-progress :percentage="70" text-inside type="primary" />
    <px-progress :percentage="85" text-inside type="success" />
    <px-progress :percentage="45" text-inside type="warning" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

Variants

Use variant to choose a fill pattern: solid, striped, or checkered.

<template>
  <div class="demo-progress">
    <px-progress :percentage="65" variant="solid" type="primary" />
    <px-progress :percentage="65" variant="striped" type="success" />
    <px-progress :percentage="65" variant="checkered" type="warning" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

Striped Flow

Add striped-flow with variant="striped" for an animated stripe effect.

<template>
  <div class="demo-progress">
    <px-progress :percentage="70" variant="striped" striped-flow type="primary" />
    <px-progress :percentage="55" variant="striped" striped-flow type="danger" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

Indeterminate

Use indeterminate for tasks with unknown completion. The bar bounces back and forth with a pixel-style steps() animation.

<template>
  <div class="demo-progress">
    <px-progress indeterminate type="primary" />
    <px-progress indeterminate variant="striped" type="success" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

Custom Color

Use the color prop with a hex string or a function that returns a color based on the current percentage.

<template>
  <div class="demo-progress">
    <px-progress :percentage="60" color="#ff6600" />
    <px-progress :percentage="percentage" :color="dynamicColor" />
    <div>
      <px-button size="small" @click="decrease"><px-icon icon="minus" /></px-button>
      <px-button size="small" @click="increase"><px-icon icon="plus" /></px-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const percentage = ref(30);

const dynamicColor = (p: number) => {
  if (p < 30) return '#f56c6c';
  if (p < 70) return '#e6a23c';
  return '#67c23a';
};

const increase = () => {
  percentage.value = Math.min(100, percentage.value + 10);
};
const decrease = () => {
  percentage.value = Math.max(0, percentage.value - 10);
};
</script>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Custom Format

Use the format prop to customize the displayed text.

<template>
  <div class="demo-progress">
    <px-progress :percentage="60" :format="hpFormat" type="danger" />
    <px-progress :percentage="75" :format="stepsFormat" type="success" />
  </div>
</template>

<script setup lang="ts">
const hpFormat = (p: number) => `${Math.round(p * 2)}/200 HP`;
const stepsFormat = (p: number) => `${Math.round(p / 25)}/4 ★`;
</script>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

Status

Use status to override the type color with a semantic status.

<template>
  <div class="demo-progress">
    <px-progress :percentage="100" status="success" />
    <px-progress :percentage="50" status="warning" />
    <px-progress :percentage="30" status="danger" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>