Progress

Matches Arco Progress with line, circle and status variants. See the Element Plus docs for props.

Line Progress

A stroke width of 4 matches Arco; exception maps to Arco danger.

40%

<template>
  <div style="width: 100%; display: grid; gap: 16px">
    <el-progress :percentage="40" :stroke-width="4" />
    <el-progress :percentage="100" :stroke-width="4" status="success" />
    <el-progress :percentage="60" :stroke-width="4" status="warning" />
    <el-progress :percentage="30" :stroke-width="4" status="exception" />
  </div>
</template>

Circle Progress

Props control circle dimensions and stroke width; status colors match Arco.

40%

<template>
  <el-progress type="circle" :percentage="40" :width="100" :stroke-width="4" />
  <el-progress type="circle" :percentage="100" :width="100" :stroke-width="4" status="success" />
</template>

Differences from Arco

• The default stroke is Element Plus's 6px; set stroke-width to 4 for Arco.
• Status variants show only an icon; Arco also shows the percentage.