Grouped and merged progress bar

[Chrissdroid]

This function solves the problem (这个功能解决的问题)

Multiple progress on one bar, or a progress bar with steps and customisation for each steps

Expected API (期望的 API)

<template>
  <n-group-progress merged>
    <!-- All progress bars will be merged in one progress bar -->
    <n-progress type="line" status="info" :percentage="10" :show-indicator="false" />
    <n-progress type="line" status="success" :percentage="20" :show-indicator="false" />
    <n-progress type="line" status="warning" :percentage="30" :show-indicator="false" />
  </n-group-progress>
</template>

<template>
  <n-group-progress merged :steps="[30, 60]">
    <!-- The progress bar will be split in 3 parts the second will start a 30% and the third at 60% of total width, like with the slider component mark attribute -->
    <n-progress type="line" status="info" :percentage="10" :show-indicator="false" />
    <n-progress type="line" status="success" :percentage="20" :show-indicator="false" />
    <n-progress type="line" status="warning" :percentage="30" :show-indicator="false" />
  </n-group-progress>
</template>

[07akioni]

Could you provide some already implemented examples?

[Chrissdroid]

https://codesandbox.io/s/stepped-progress-pj0k4?file=/src/components/NGroupProgress.vue Something like this ?