Add Text

[qamoonsite]

Hi, i am using it as directive, cannot add the text in the middle. my code: <div round-progress max="100" current="70" color="#4b4b4b" bgcolor="#f3efb" radius="100" stroke="7" semi="false" rounded="false" clockwise="true" responsive="false" duration="800" animation="easeInOutQuart" animation-delay="0" offset="0">

My Text

[crisbeto]

You can't add text by default (it has been requested before, but it's outside the scope of the project). However you can add it yourself with an overlay that you position with CSS above the circle. This is done in the demo, which you can refer to. The example in the demo is a little more complicated since it should apply to most scenarios, but you can do it by doing the following:

First of all, wrap the progress element and the text in a div with some class, for example progress-wrapper:

<div class="progress-wrapper">
    <div
        round-progress
        max="100"
        current="70"
        color="#4b4b4b"
        bgcolor="#f3efb"
        radius="100"
        stroke="7"
        semi="false"
        rounded="false"
        clockwise="true"
        responsive="false"
        duration="800"
        animation="easeInOutQuart"
        animation-delay="0"
        offset="0"></div>

    <div class="text">Your text goes here</div>
</div>

Afterwards add the following to your CSS in order to center the text:

.progress-wrapper{
    position: relative;
}

.progress-wrapper .text{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    text-align: center;
    width: 100%;
    z-index: 1;
}

[crisbeto]

Did this work out for you?

[chas-bean]

I had a similar scenario and that worked for me - thanks!

[crisbeto]

I'll assume that this is solved. Feel free to comment or re-open if there's still an issue.

[anilkumarsoni]

thank u bro :-)