How to get text inside the round progress bar circle?

[alexanderjareno]

Hi,

I'm quite new to angular, and I'm using your round progress bar in a school project. I'm wondering how to get a label inside the progress circle? I have looked at the source code for your demo, but I still can't seem to get the progress numbers to show up inside the circle, the numbers only show up above the circle. Everything else works, except the placement of the numbers.

<div class="progress-wrapper"  ng-style="{'font-size': getFontSize()}">

        <div class="progress">
            {{ sp.current }} / {{ sp.max }}
        </div>

        <div
        round-progress
        max="sp.max"
        current="sp.current"
        color="#45ccce"
        bgcolor="#eaeaea"
        radius="65"
        stroke="15"
        semi="false"
        rounded="false"
        clockwise="true"
        iterations="75"
        animation="easeInOutQuart">
    </div>
</div>

[crisbeto]

You're correct, the directive doesn't support having text inside the element itself. The way I use it is to overlay the numbers above the circle.

[alexanderjareno]

Hi,

Thanks for the info! Found that the demo uses css code that makes the text appear inside the circle. This css code is not included in the readme though.

Regards,
Alex

.progress-wrapper{
    position: relative;
    margin:20px auto;
    font-size: 21px;
}
.progress{
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 6em;
    font-size:1em;
    text-align: center;
    color: #886aea;
    font-weight: 100;
}