Progress

Progress is used to show the progress of current operation, and inform the user the current status.

Linear progress bar

Use percentage attribute to set the percentage. It is required and must be between 0-100. You can custom text format by setting format.

50%

full

Internal percentage

In this case the percentage takes no additional space. stroke-width attribute decides the width of progress bar, and use text-inside attribute to put description inside the progress bar.

70%

100%

80%

50%

Custom color

You can use color attr to set the progress bar color. it accepts color string, function, or array.

20%

<template>
  <tu-progress :percentage="percentage" :color="customColor" />
  <tu-progress :percentage="percentage" :color="customColorMethod" />
  <tu-progress :percentage="percentage" :color="customColors" />
  <tu-progress :percentage="percentage" :color="customColors" />
  <div>
    <tu-button-group>
      <tu-button :icon="Minus" @click="handleDecrease" />
      <tu-button :icon="Plus" @click="handleIncrease" />
    </tu-button-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Minus, Plus } from '@tu-view-plus/icons-vue';

const percentage = ref(20);
const customColor = ref('#409eff');

const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
];

const customColorMethod = (percentage: number) => {
  if (percentage < 30) {
    return '#909399';
  }
  if (percentage < 70) {
    return '#e6a23c';
  }
  return '#67c23a';
};

const handleIncrease = () => {
  percentage.value += 10;
  if (percentage.value > 100) {
    percentage.value = 100;
  }
};

const handleDecrease = () => {
  percentage.value -= 10;
  if (percentage.value < 0) {
    percentage.value = 0;
  }
};
</script>

<style scoped>
.tu-progress--line {
  margin-bottom: 15px;
}
</style>

<template>
  <tu-progress :percentage="percentage" :color="customColor" />
  <tu-progress :percentage="percentage" :color="customColorMethod" />
  <tu-progress :percentage="percentage" :color="customColors" />
  <tu-progress :percentage="percentage" :color="customColors" />
  <div>
    <tu-button-group>
      <tu-button :icon="Minus" @click="handleDecrease" />
      <tu-button :icon="Plus" @click="handleIncrease" />
    </tu-button-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Minus, Plus } from '@tu-view-plus/icons-vue';

const percentage = ref(20);
const customColor = ref('#409eff');

const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
];

const customColorMethod = (percentage: number) => {
  if (percentage < 30) {
    return '#909399';
  }
  if (percentage < 70) {
    return '#e6a23c';
  }
  return '#67c23a';
};

const handleIncrease = () => {
  percentage.value += 10;
  if (percentage.value > 100) {
    percentage.value = 100;
  }
};

const handleDecrease = () => {
  percentage.value -= 10;
  if (percentage.value < 0) {
    percentage.value = 0;
  }
};
</script>

<style scoped>
.tu-progress--line {
  margin-bottom: 15px;
}
</style>

Circular progress bar

You can specify type attribute to circle to use circular progress bar, and use width attribute to change the size of circle.

70%

Customized content

Use default slot to add customized content.

Content

Indeterminate progress

Use indeterminate attribute to set indeterminate progress, with duration to control the animation duration.

50%

full

Striped progress

Use striped attribute to set striped progress. You can use striped-flow to get the stripes to flow, with duration to control the animation duration.

50%

<template>
  <tu-progress striped :percentage="50" />
  <tu-progress status="warning" striped striped-flow :percentage="30" />
  <tu-progress
    status="success"
    striped
    striped-flow
    :percentage="100"
    :duration="10"
  />
  <tu-progress
    status="exception"
    striped
    striped-flow
    :percentage="percentage"
    :duration="duration"
  />
  <tu-button-group>
    <tu-button :icon="Minus" @click="handleDecrease" />
    <tu-button :icon="Plus" @click="handleIncrease" />
  </tu-button-group>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { Minus, Plus } from '@tu-view-plus/icons-vue';

const percentage = ref<number>(70);
const duration = computed(() => Math.floor(percentage.value / 10));

const handleIncrease = () => {
  percentage.value += 10;
  if (percentage.value > 100) {
    percentage.value = 100;
  }
};
const handleDecrease = () => {
  percentage.value -= 10;
  if (percentage.value < 0) {
    percentage.value = 0;
  }
};
</script>

<style scoped>
.tu-progress--line {
  margin-bottom: 15px;
}
</style>

<template>
  <tu-progress striped :percentage="50" />
  <tu-progress status="warning" striped striped-flow :percentage="30" />
  <tu-progress
    status="success"
    striped
    striped-flow
    :percentage="100"
    :duration="10"
  />
  <tu-progress
    status="exception"
    striped
    striped-flow
    :percentage="percentage"
    :duration="duration"
  />
  <tu-button-group>
    <tu-button :icon="Minus" @click="handleDecrease" />
    <tu-button :icon="Plus" @click="handleIncrease" />
  </tu-button-group>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { Minus, Plus } from '@tu-view-plus/icons-vue';

const percentage = ref<number>(70);
const duration = computed(() => Math.floor(percentage.value / 10));

const handleIncrease = () => {
  percentage.value += 10;
  if (percentage.value > 100) {
    percentage.value = 100;
  }
};
const handleDecrease = () => {
  percentage.value -= 10;
  if (percentage.value < 0) {
    percentage.value = 0;
  }
};
</script>

<style scoped>
.tu-progress--line {
  margin-bottom: 15px;
}
</style>

Sizes

you can use stroke width to set the width of the progress.

50%

25%

Progress API

Progress Attributes

Name	Description	Type	Default
percentage	Percentage (required)	`Number`	0
type	The type of progress bar	`line` `circle` `dashboard`	line
stroke-width	The width of progress bar	`Number`	8
text-inside	Whether to place the percentage inside progress bar, only works when type is 'line'	`Boolean`	false
status	The current status of progress bar	`success` `exception` `warning`	-
indeterminate	Set indeterminate progress	`Boolean`	false
duration	Control the animation duration of indeterminate progress or striped flow progress	`Number`	3
color	Background color of progress bar. Overrides status prop	`String` `Function` `Array`	-
width	The canvas width of circle progress bar	`Number`	126
show-text	Whether to show percentage	`Boolean`	true
stroke-linecap	Circle type shape at the end path	`butt` `round` `square`	round
format	Custom text format	`Function`	-
striped	Stripe over the progress bar's color	`Boolean`	false
striped-flow	Get the stripes to flow	`Boolean`	false

Slots

Name	Description
default	Customized content, parameter is

Progress ​

Linear progress bar ​

Internal percentage ​

Custom color ​

Circular progress bar ​

Customized content ​

Indeterminate progress ​

Striped progress ​

Sizes ​

Progress API ​

Progress Attributes ​

Slots ​