Progress Pool

⭐Star

👑Pioneer

TuiProgressPool is a highly decorative progress display component. It simulates the visual effects of a "water tank" or "battery charging," supporting wave animations (Wave), dashed borders (Dash Border), and various color gradient strategies. When paired with TuiProgressPoolGroup, it can easily achieve queue animation effects.

Basic Usage

Basic Display

The simplest usage involves configuring value and label. By default, the component automatically calculates the percentage and wraps it in a high-tech dashed border.

<template>
  <div style="width: 300px; height: 100px;">
    <TuiProgressPool 
      :value="60" 
      label="Basic Progress Pool" 
    />
  </div>
</template>

Visual Effects

Wave Fill (Wave)

Set fillContent="wave" to enable the liquid level wave animation. You can finely control the height, number of segments, and animation duration of the waves to simulate the effect of a moving liquid surface.

• waveHeight: The height of the wave ripples.
• waveSegments: The number of wave peaks.

<template>
  <TuiProgressPool 
    :value="45" 
    label="Level Monitoring" 
    fillContent="wave"
    :waveHeight="10"
    :waveSegments="4"
    :colors="['#409eff', '#36cfc9']" 
  />
</template>

Shape and Direction

• shape: Supports square (default rectangle) and circle.
• barDirection: Controls the growth direction of the internal progress bar (h for horizontal, v for vertical).

<template>
  <TuiProgressPool 
    :value="75" 
    shape="circle" 
    barDirection="v"
    fillContent="wave"
    label="Tank Capacity" 
    unit="L"
    :width="150"
  />
</template>

Values and Thresholds

Numerical Display Logic

The component provides powerful numerical display configurations:

• maxValue: Sets the maximum value used to calculate the percentage (defaults to 100).

• displayValue: Controls the displayed content.

• auto: Automatic display.

• all: Displays both the percentage and the actual value.

• allReverse: Reverses the primary and secondary display positions of the percentage and actual value.

• unit: Numerical unit.

Smart Thresholds (Thresholds)

Through the thresholds object, you can automatically switch color states based on the numerical value. It supports defining breakpoints for five states: critical, danger, warning, normal, and success.

<script setup>
const myThresholds = {
  danger: 20,   // 0-20
  warning: 50,  // 21-50
  normal: 80,   // 51-80
  success: 100  // 81+
};
</script>

<template>
  <TuiProgressPool 
    :value="85" 
    :thresholds="myThresholds"
    label="Health Score" 
  />
</template>

Progress Pool Group

Using TuiProgressPoolGroup allows you to render a set of progress pools and supports queue animations (playing entrance animations one after another).

• queueInit: Whether to enable queue initialization animation (defaults to true).
• progressPoolConfig: Uniformly configures the style properties for all internal items.

<script setup>
const items = [
  { label: "Node A", value: 32 },
  { label: "Node B", value: 65 },
  { label: "Node C", value: 89 }
];

const poolConfig = {
  fillContent: 'wave',
  barDirection: 'v', // Vertical bar effect
  gradientAni: true  // Enable gradient light animation
};
</script>

<template>
  <div style="height: 300px">
    <TuiProgressPoolGroup 
      :items="items" 
      :progressPoolConfig="poolConfig"
      :gap="20"
    />
  </div>
</template>

API Reference

TuiProgressPool Props

Property	Type	Default	Description
value	Number	0	Current value.
maxValue	Number	null	Maximum value. If not provided, percentage is calculated based on 100.
label	String	Required	Title/label text.
unit	String	''	Numerical unit.
shape	String	'square'	Shape. Options: square, circle.
fillContent	String	'bar'	Type of fill content. Options: bar (standard), wave (wave).
colors	String/Array	null	Color configuration. Supports a single color string or [startColor, endColor] gradient array.
barDirection	String	'h'	Progress growth direction. Options: h, v.
labelPostion	String	'top'	Label position. Options: top, left, right, bottom.
displayValue	String	'auto'	Numerical display mode. Options: none, auto, all, allReverse.
status	String	-	Force a specific status color (success, warning, etc.).
thresholds	Object	-	Threshold configuration object.
barDash	Array	[5, 2]	Dashed line configuration for the internal progress bar [line length, gap length].
borderWidth	Number	3	Outer frame border width.
borderGap	Number	3	Gap between the outer frame and internal progress.
borderRadius	Number	5	Border corner radius.
gradientType	String	'linear'	Gradient type. Options: linear, radial.
gradientAni	Boolean	false	Whether to enable gradient light animation.
waveHeight	Number	20	Wave height (px).
waveSegments	Number	6	Number of wave segments.
aniDelay	Number	2000	Initial animation delay (ms).
duration	Number	-	Animation duration (ms).
resizeObserver	String	'global'	Size monitoring strategy.

TuiProgressPoolGroup Props

Property	Type	Default	Description
items	Array	[]	Data source array; items contain { label, value }.
progressPoolConfig	Object	-	Props configuration object passed uniformly to internal TuiProgressPool components.
gap	Number	-	Spacing between elements in the group.
direction	String	'h'	Group arrangement direction. Options: h, v.
queueInit	Boolean	true	Whether to enable queued delayed initialization (playing entrance animations in sequence).
labelWidth	Number	-	Uniform label width (for alignment).

Emits

Event Name	Description	Callback Parameters
inited	Triggered when the component initialization animation completes.	-