這次的有用到jQuery，讓進度條動起來！

HTML

有使用到data-寫法～

<div class="tool-chart" data-progress="90" data-title="degree">
  <div class="tag"></div>
  <div class="bar">
    <span></span>
  </div>

CSS

設定進度條外觀

.tool-chart{
  position: relative;
  width: calc(100% - 90px);
  left: 70px;
}
.tool-chart::after{
  content: attr(data-title);
  position: absolute;
  top: 0;
  right: calc(100% + 15px);
}
.bar{
  margin-top: 60px;
  margin-bottom: 5px;
  height: 15px;
  background: #eee;
  border-radius: 10px;
  
/*   讓進度條圓角被遮起來 */
  overflow: hidden;
}

tag搭配偽元素製作上方標籤

.tag{
  position: absolute;
  bottom: calc(100% + 7px);
  border-radius: 3px;
  background: #098789;
  padding: 5px;
  font-size: 15px;
  color: #fff;
  transform: translateX(-50%);

  left: 0%;
}
.tag::after{
  content:'';
  display: block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #098789;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}
.bar span{
  display: inline-block;
  height: 120%;
  background: #098789;

  width: 0%;
}

jQuery

自動填入progress數值並移動到相對位置。

$(".tool-chart").each(function(){
  
  var progress = $(this).attr("data-progress");
  
  $(this).children(".tag").text(progress + "%")
    .animate({
    left: progress + "%",
  },1500
  );
  
  $(this).children(".bar").children("span").animate({
    width: progress + "%",
  },1500)
})