Progress

Brief Introduction

The Progress component is used to display the progress status of a task or operation.
You can use <MYProgress></MYProgress> to implement a progress bar.

Basic Usage

Use the percentage prop to set the progress percentage.

Code Demo

50%

<template>
    <MYProgress :percentage='50' />
</template>

展开代码

Different Statuses

Use the status prop to set the progress bar status.

Code Demo

70%

50%

30%

50%

<template>
    <div style='display: flex; flex-direction: column; gap: 20px;'>
        <MYProgress :percentage='70' status='success' />
        <MYProgress :percentage='50' status='warning' />
        <MYProgress :percentage='30' status='exception' />
    </div>
</template>

展开代码

API Reference

Props

Prop	Description	Type	Options	Default
percentage	Progress percentage	number	Value between 0-100	0
status	Progress bar status	string	success/warning/exception	''
format	Formatting function	function	—	—

Type Definitions

interface ProgressProps {
  percentage?: number;
  status?: 'success' | 'warning' | 'exception' | '';
  color?: string;
  format?: (percentage: number) => string;
  size?: 'small' | 'medium' | 'large';
}