将文本添加到Angular SVG Round Progress Bar

Question

So I'm using Cris Beto's Angular SVG Round Progress Bar to... create a round progress bar. Anyway, I want to add text to the center of it, like the demo . I've tried just adding the text between the divs, and also going into the source code on the demo page to try to figure it out and I haven't been able to figure it out.

I've basically followed his directions exactly to get a working bar graph with animation. Any ideas?

Just in case, here's my 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

This is probably a day late and a dollar short, but it stumped me as well until I dug further. Here is how they are doing it ... and this is my implementation:

<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

This is how I implemented it in my project:

<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>

And the CSS:

.positionRelative{
    position: relative;

}

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