Rolling Progress Bar

⭐Star

TuiRollingProgress is a composite component specifically designed for displaying dynamic data lists. It perfectly combines the seamless scrolling engine of TuiRolling with the progress display capabilities of TuiProgress. It is ideal for building sales leaderboards, real-time production monitoring, or Top N data dashboards.

Basic Usage

Basic List

Wrap TuiRollingProgressItem with TuiRollingProgress. You must specify visibleLength to control the number of items displayed within the viewport.

<script setup>
import { ref } from 'vue';

const dataList = ref([
  { label: "Data Center A", value: 35 },
  { label: "Data Center B", value: 68 },
  { label: "Data Center C", value: 89 },
  { label: "Data Center D", value: 45 },
  { label: "Data Center E", value: 12 }
]);
</script>

<template>
  <div style="height: 300px">
    <TuiRollingProgress :visibleLength="4" autoRolling seamless>
      <TuiRollingProgressItem 
        v-for="(item, index) in dataList" 
        :key="index"
        :label="item.label"
        :value="item.value"
      />
    </TuiRollingProgress>
  </div>
</template>

Data Configuration

Through the progressConfig property, you can uniformly configure the behavior of all internal progress bars, such as value types, units, and color thresholds.

Values and Units

• valueType: 'percent' (default 0-100) or 'number' (absolute value).
• unit: Suffix unit for the numerical value.

<TuiRollingProgress 
  :progressConfig="{ 
    valueType: 'number', 
    unit: 'k USD' 
  }"
>
  ...
</TuiRollingProgress>

Smart Color Thresholds

Supports configuring a thresholds object to automatically change the progress bar color based on the value. For example: below 30 is danger, and above 70 is success.

<script setup>
const myThresholds = {
  danger: 0,    // 0-30 Red
  warning: 30,  // 30-50 Yellow
  normal: 50,   // 50-70 Blue
  success: 70   // 70+ Green
};
</script>

<template>
  <TuiRollingProgress 
    :progressConfig="{ thresholds: myThresholds }"
  >
    ...
  </TuiRollingProgress>
</template>

Ranking and Serial Numbers

The component features built-in support for leaderboard styles.

• hasIndex: Whether to display a serial number on the left.
• showRankings: Whether to enable highlighting effects for the top three items (Gold, Silver, and Bronze styles).

<TuiRollingProgress 
  :visibleLength="5" 
  hasIndex 
  showRankings 
>
  <TuiRollingProgressItem 
    v-for="(item, index) in list" 
    :index="index + 1" 
    v-bind="item" 
  />
</TuiRollingProgress>

Scrolling Control

Inherits powerful control capabilities from TuiRolling:

• mode: 'item' (scroll by item) / 'page' (scroll by page).
• seamless: Whether to enable seamless looping.
• interval: Scrolling interval (ms).
• motionBlur: Enables motion blur to improve visual smoothness during fast scrolling.

API Reference

TuiRollingProgress Props

Property	Type	Default	Description
visibleLength	Number	1	Required. Number of items displayed in the visible area.
interval	Number	-	Automatic scroll interval (ms).
mode	String	'item'	Scrolling mode. Options: item, page.
seamless	Boolean	true	Whether to enable seamless loop scrolling.
showControl	Boolean	true	Whether to display the page control bar.
motionBlur	Boolean	true	Whether to enable motion blur.
hasIndex	Boolean	false	Whether to display serial numbers.
showRankings V0.0.6+	Boolean	false	Whether to enable ranking highlight styles (special styles for top three).
progressConfig	Object	-	Uniform configuration for internal progress bars (valueType, unit, thresholds, color).
tagConfig	Object	-	Uniform configuration for serial number Tag styles.
tipConfig	Object	-	Uniform configuration for tooltip message styles.
resizeObserver	String	'global'	Size monitoring strategy.

TuiRollingProgressItem Props

Property	Type	Default	Description
label	String	Required	Label/name of the progress bar.
value	Number	Required	Progress value.
index	Number	-	Ranking index (used for hasIndex display).
status	String	-	Forces a specific status color (success, warning, danger, etc.).
color	String	-	Forces a specific custom color (CSS color value).
icon	String	-	Icon class name next to the label.
showStatusIcon	Boolean	false	Whether to display the status icon.

Emits

Event Name	Description	Callback Parameters
start	Triggered when scrolling starts.	-
rolling	Triggered continuously during the scrolling process.	(offset)

Credits

Jiaming743

DataV scrollRankingBoard

This component was inspired by the scrollRankingBoard component from the @jiaminghi/data-view library. As it was a heavily used component in earlier career projects, the development of the TechUI version aimed to expand its functionality by rebuilding it entirely on top of the TuiRolling component.