css 半圆形 进度条

以下是一个简单的CSS半圆形进度条的实现方法：

1. HTML代码

<div class="progress" data-progress="50"></div>

2. CSS代码

.progress {
 position: relative;
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
  overflow: hidden;
}

.progress:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.progress:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f00;
  transform-origin: bottom center;  transform: rotate(180deg);
}

.progress[data-progress]:after {
  transform: rotate(calc(180deg * var(--progress) / 100));
}

3. 解释

首先，我们创建一个具有指定半径和高度的div元素，并将其设置为圆形。然后，我们使用CSS的伪元素:before和:after来创建进度条的底部和顶部部分。我们使用transform-origin属性将旋转点设置为底部中心，并使用transform: rotate(180deg)将进度条旋转180度，使其成为半圆形。最后，我们使用CSS变量和calc()函数来动态设置进度条的进度。