帮我设计一个好看的双圆环进度条包括html代码hecss代码

好的，以下是一个简单的双圆环进度条的HTML和CSS代码，你可以根据需要修改颜色、大小和进度值。

HTML代码：

<div class="progress">
  <div class="progress-inner">
    <div class="progress-circle-left">
      <div class="progress-circle-left-inner"></div>
    </div>
    <div class="progress-circle-right">
      <div class="progress-circle-right-inner"></div>
    </div>
    <div class="progress-text">50%</div>
  </div>
</div>

CSS代码：

.progress {
  width: 120px;
  height: 120px;
  position: relative;
  margin: 0 auto;
  text-align: center;
}

.progress-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.progress-circle-left,
.progress-circle-right {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}

.progress-circle-left {
  left: 0;
}

.progress-circle-right {
  right: 0;
}

.progress-circle-left-inner,
.progress-circle-right-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 10px solid #eee;
  position: absolute;
  top: 0;
  left: 0;
}

.progress-circle-right-inner {
  transform: rotate(180deg);
}

.progress-text {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

你可以在CSS中修改以下参数：

- `.progress` 的 `width` 和 `height` 控制进度条的大小。
- `.progress-circle-left-inner` 和 `.progress-circle-right-inner` 的 `border` 控制圆环的宽度和颜色。
- `.progress-text` 的 `font-size` 和 `color` 控制进度值的字体大小和颜色。

在HTML中，你可以修改 `.progress-text` 的文本内容来显示不同的进度值。