element ui中进度条头部和尾部内嵌两个圆形

element UI中进度条头部和尾部内嵌两个圆形的样式可以通过以下代码实现：

<template>
  <div class="progress-bar">
    <div class="progress-bar-inner">
      <div class="circle"></div>
      <el-progress :percentage="percentage" :text-inside="true" />
      <div class="circle"></div>
    </div>
  </div>
</template>

<style>
.progress-bar {
  width: 200px;
  height: 20px;
  background-color: #f5f7fa;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar-inner {
  position: relative;
  height: 100%;
  background-color: #409eff;
  transition: width 0.3s;
}

.circle {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
}

.circle:first-child {
  left: 0;
}

.circle:last-child {
  right: 0;
}
</style>