🌏 Translated with the assistance of DeepSeek and ChatGPT

Progress

This component represents task completion progress visually, though it is not indicative of real-world progress.

Progress Themes

The progress offers various themes: 'primary' (default), 'success', 'warning', 'danger', 'sakura' and 'notice'.

<template>
	<px-space direction="vertical">
		<px-progress :percentage="progress"> </px-progress>
		<px-progress :percentage="progress" theme="notice"> </px-progress>
		<px-progress :percentage="progress" theme="success"> </px-progress>
		<px-progress :percentage="progress" theme="warning"> </px-progress>
		<px-progress :percentage="progress" theme="danger"> </px-progress>
		<px-progress :percentage="progress" theme="sakura"> </px-progress>
		<px-button-group>
			<px-button theme="info" @click="progress = Math.max(0, progress - 10)">
				<template #icon>
					<IconMinus />
				</template>
			</px-button>
			<px-button theme="info" @click="progress = Math.min(100, progress + 10)">
				<template #icon>
					<IconPlus />
				</template>
			</px-button>
		</px-button-group>
	</px-space>
</template>

<script setup lang="ts">
import { IconMinus, IconPlus } from '@pixelium/web-vue/icon-hn/es'
import { ref } from 'vue'

const progress = ref(10)
</script>

Progress Variants

There are two visual variants: 'solid' (default) and 'checkered'.

<template>
	<px-space direction="vertical">
		<px-progress variant="checkered" :percentage="16.67"> </px-progress>
		<px-progress variant="checkered" :percentage="33.33" theme="notice"> </px-progress>
		<px-progress variant="checkered" :percentage="50" theme="success"> </px-progress>
		<px-progress variant="checkered" :percentage="66.67" theme="warning"> </px-progress>
		<px-progress variant="checkered" :percentage="83.33" theme="danger"> </px-progress>
		<px-progress variant="checkered" :percentage="100" theme="sakura"> </px-progress>
	</px-space>
</template>

Indicator

Use the indicator slot to render a custom indicator (for example a label showing percentage). The component will position it automatically; indicatorPlacement prop controls whether it sits 'inside' or 'outside' the bar.

30%

70%

<template>
	<px-space direction="vertical">
		<px-progress :percentage="30" theme="success">
			<template #indicator="{ percentage }">
				<span>{{ percentage }}%</span>
			</template>
		</px-progress>
		<px-progress :percentage="70" variant="checkered" indicator-placement="outside">
			<template #indicator="{ percentage }">
				<px-text-outline :outline-width="2" color="var(--px-primary-6)"
					>{{ percentage }}%</px-text-outline
				>
			</template>
		</px-progress>
	</px-space>
</template>

Sizes

Control height with the size prop. Accepts 'small', 'medium' (default), 'large' or a number (px).

<template>
	<px-space direction="vertical">
		<px-progress :percentage="20" size="small"> </px-progress>
		<px-progress :percentage="26" variant="checkered" theme="success"> </px-progress>
		<px-progress :percentage="36" size="large" theme="sakura"> </px-progress>
		<px-progress :percentage="52" :size="52" theme="danger"> </px-progress>
	</px-space>
</template>

Prepend / Append Slots

You can provide prepend and append slots to add content before or after the progress bar (e.g. labels or icons).

Progress: 100%

Status: Complete

Message

<template>
	<px-space direction="vertical">
		<px-progress :percentage="100">
			<template #prepend="{ percentage }">
				<span>Progress: {{ percentage }}%</span>
			</template>
			<template #append="{ percentage }">
				<span>Status: {{ percentage === 100 ? 'Complete' : 'In Progress' }}</span>
			</template>
		</px-progress>
		<px-progress :percentage="100" theme="success">
			<template #prepend> Message </template>
		</px-progress>
	</px-space>
</template>

Custom Color

Set a custom color string (CSS-like rgb/rgba or hex 3/4/6/8) to generate a palette used by the bar. trackBackgroundColor can override the track background.

<template>
	<px-space direction="vertical">
		<px-progress :percentage="20" color="#3B82F6"> </px-progress>
		<px-progress :percentage="60" color="#F59E0B" track-color="#FDE3B2"> </px-progress>
		<px-progress :percentage="100" variant="checkered" color="#8B5CF6"> </px-progress>
	</px-space>
</template>

API

ProgressProps

Attribute	Type	Optional	Default	Description	Version
percentage	number	True	0	Numeric value indicating completion progress (0-100).	0.1.0
variant	'solid' | 'checkered'	True	'solid'	The style variant of the progress bar.	0.1.0
theme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'notice'	True	'primary'	The theme of the progress bar.	0.1.0
size	'medium' | 'large' | 'small'	True	'medium'	The size of the progress bar, measured in px when a number is input.	0.1.0
gap	number	True	2	Gap spacing (px) inside the border.	0.1.0
indicatorPlacement	'inside' | 'outside'	True	'inside'	The position of the indicator content, located inside or outside the filled portion of the progress bar.	0.1.0
color	string	True		Custom primary color. A complete color palette is generated internally based on this, taking precedence over the preset palette provided by theme. Supports CSS-like strings such as 'rgb(r, g, b)' and 'rgba(r, g, b, a)', as well as 3, 4, 6, or 8-digit hexadecimal representations.	0.1.0
color	string	True		Custom primary color. A complete color palette is generated internally based on this, taking precedence over the preset palette provided by theme. Supports CSS-like strings such as 'rgb(r, g, b)' and 'rgba(r, g, b, a)', as well as 3, 4, 6, or 8-digit hexadecimal representations.	0.1.0
pollSizeChange	boolean	True	false	Enables polling for component size changes, which may affect performance. Often used when the component's size is influenced by its container element, causing abnormal canvas rendering.	0.1.0

ProgressSlots

Slot	Parameter	Description	Version
append	percentage: number	Slot for content placed after the progress bar.	0.1.0
prepend	percentage: number	Slot for content placed before the progress bar.	0.1.0
indicator	percentage: number	Slot for indicator content inside the progress bar.	0.1.0