好基友扔過來一張效果圖，簡單分析下，一起看看如何實現(xiàn)它吧。

1. 一個半環(huán)形用于表示 0 - 100%。
2. 半環(huán)形開頭有一個圓點作為修飾。
3. 半環(huán)形兩端需要呈現(xiàn)為圓角。

通過 div 實現(xiàn)

先畫一個長方形。

<div class="graph"></div>

.graph {
  width: 200px;
  height: 100px;
  border: 20px solid rgb (58, 215, 217);
}

接下來把長方形轉(zhuǎn)換為半環(huán)形。

.graph {
   width: 200px;
   height: 100px;
   border: 20px solid rgb (58, 215, 217);
+  border-radius: 0 0 200px 200px;
+  border-top: none;
}

給環(huán)形開頭添加圓點修飾，實際等于添加到長方形的左上角。

<div class="graph">
+  <div class="dot"></div>
</div>

.graph {
+ position: relative;
  width: 200px;
  height: 100px;
  border: 20px solid rgb (58, 215, 217);
  border-radius: 0 0 200px 200px;
  border-top: none;
}

+.dot {
+  position: absolute;
+  top: 5px;
+  left: -15px;
+  z-index: 9999;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: #fff;
+  transform-origin: center top;
+}

環(huán)形有了，如何實現(xiàn)進度條效果呢？讓半環(huán)形旋轉(zhuǎn)，并隱藏超出部分。可以給元素添加 transform 使其旋轉(zhuǎn)。

.graph {
  position: relative;
  width: 200px;
  height: 100px;
  border: 20px solid rgb (58, 215, 217);
  border-radius: 0 0 200px 200px;
  border-top: none;
+ transform: rotate (150deg);
}

半環(huán)形并沒有根據(jù)中心點旋轉(zhuǎn)，通過 transform-origin: center top 設(shè)置原點為中間頂部，即環(huán)形的中心。

.graph {
  position: relative;
  width: 200px;
  height: 100px;
  border: 20px solid rgb (58, 215, 217);
  border-radius: 0 0 200px 200px;
  border-top: none;
+ transform-origin: center top;
  transform: rotate (150deg);
}

給環(huán)形添加一個父元素，并設(shè)置超出部分隱藏。

<div class="graph-wrapper">
  <div class="graph">
    <div class="dot"></div>
  </div>
</div>

.graph-wrapper {
  width: 200px;
  height: 100px;
  overflow: hidden;
  transform: rotate (90deg);
}

動態(tài)設(shè)置環(huán)形元素的 rotate 角度實就可以實現(xiàn)進度條效果了。0 - 100% 對應 180 - 360deg。

可以通過 JavaScript 設(shè)置半環(huán)形的進度。

function calculateValue(range, percentage) {
  const  [start, end] = range
  const result = start + (end - start) * percentage / 100;
  return result;
}

function renderGraph(percentage) {
  const deg = calculateValue ([180, 360], percentage);
  const el = document.querySelector ('.graph')
  el.style.transform = `rotate (${deg}deg)`
}

renderGraph (30) // 30%

總結(jié)

我們先使用 div 畫了一個長方形，添加 border 與 border-radius 屬性使其轉(zhuǎn)換為半環(huán)形，又通過 transform 屬性使半環(huán)形可以旋轉(zhuǎn)。接下來給半環(huán)形套了一層元素，超出部分隱藏，以實現(xiàn)進度條效果。

在博文開頭處，我們對效果圖進行了分析。其中，第 3 點 “半環(huán)形兩端需要呈現(xiàn)為圓角” 還沒有被支持。限于篇幅，將在接下來的博文中實現(xiàn)，最終效果如下圖。