將文字添加到Angular SVG圓形進度條

Question

因此，我使用Cris Beto的Angular SVG圓形進度條...創建一個圓形進度條。無論如何，我想添加文本到它的中心，如demo。我嘗試在div之間添加文本，並且還要進入演示頁面上的源代碼以嘗試找出它，但我一直無法弄清楚。

我已經基本上按照他的方向來得到一個帶有動畫的工作條形圖。有任何想法嗎？

以防萬一，這裏是我的HTML：

 <div id="circleGraph" class="container-fluid"> 
     <div 
      round-progress 
      max="200" 
      current="100" 
      color="#45ccce" 
      bgcolor="#eaeaea" 
      radius="100" 
      stroke="30" 
      semi="false" 
      rounded="true" 
      clockwise="true" 
      responsive="false" 
      duration="800" 
      animation="easeInOutQuart"> 
     </div> 
    </div> 

Answer 1

這可能是晚了一天和美元空頭，但它難倒我，以及我之前進一步挖掘。這裏是他們是如何做的？這是我的實現：

<style> 
.progress-percentage-wrapper { 
    position: relative; 
    margin: 20px auto; 
    font-size: 50px; 
    width: 200px; 
    height: 200px; 
} 
.progress-percentage { 
    position: absolute; 
    color: #bbb; 
    width: 100%; 
    text-align: center !important; 
    top: 35%; 
} 
</style> 

<div class="progress-percentage-wrapper"> 
     <div class="progress-percentage ng-cloak">{{vm.percentageOfGoal | percentage:0}}</div> 
      <round-progress max="1" 
         current="vm.percentageOfGoal" 
         color="#45ccce" 
         bgcolor="#eaeaea" 
         radius="100" 
         stroke="20" 
         semi="false" 
         rounded="false" 
         clockwise="true" 
         responsive="false" 
         duration="1000" 
         animation="easeInOutQuart" 
         animation-delay="500"></round-progress> 
     </div> 
    </div> 

Answer 2

這是我如何實現它在我的項目：

<div class="positionRelative"> 

    <round-progress 
     max="100" 
     current="[[myValue.percentage]]" 
     color="#4AB7EC" 
     bgcolor="#56606B" 
     radius="35" 
     stroke="5" 
     semi="false" 
     rounded="false" 
     clockwise="true" 
     responsive="false" 
     duration="800" 
     animation="easeInOutQuart" 
     animation-delay="0"></round-progress> 

     <div class="percentageValue"> 
      20 % // text that comes in cetner 
     </div> 

</div> 

而CSS：

.positionRelative{ 
    position: relative; 

} 

.percentageValue { 
    left: 10px; 
    top: 40%; 
    position: absolute; 
    width: 100%; 
    text-align: center; 
    font-size: 13px; 
    font-weight: 600; 
}