#progress_meter { position: relative; display: inline-block; width: 200px; height: 200px; margin: 0; padding: 0; }

    #progress_meter ul { list-style-type: none; width: 200px; height: 200px; padding: 0; margin: 0; }

    #progress_meter li { position: absolute; top: 0px; width: 200px; height: 200px; padding: 0; margin: 0; }

    #progress_meter p { width: 200px; height: 200px; padding: 0; margin: 0; }

    #progress_meter li p { -webkit-transition: all .7s ease-out; }

    #progress_meter span { display: block; width: 100px; height: 200px; }

    #progress_meter ul :nth-child(odd) { clip: rect(0px, 200px, 200px, 100px); }

    #progress_meter ul :nth-child(even) { clip: rect(0px, 100px, 200px, 0px); }

    .pie_left { -moz-border-radius-topleft: 100px; -moz-border-radius-bottomleft: 100px; -webkit-border-top-left-radius: 100px; -webkit-border-bottom-left-radius: 100px; border-top-left-radius: 100px; border-bottom-left-radius: 100px; }

    .pie_right { margin-left: 100px; -moz-border-radius-topright: 100px; -moz-border-radius-bottomright: 100px; -webkit-border-top-right-radius: 100px; -webkit-border-bottom-right-radius: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; }

    #c1_l span, #c1_r span { background-color: gray; }
    #c1_r { background-image: url('../img/green_red.png'); background-size: 218px; }
    #c1_l { background-image: url('../img/green_red.png'); background-size: 218px; }
    /* progress_meter data (degree value) */
    #progress_meter ul #c1_r p { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); }
    #progress_meter ul #c1_l p { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); }

    /* progress */
    #center-circle { width: 90px; height: 90px; position: absolute; z-index: 1000; top: 55px; left: 55px; background: #fff; text-align: center; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -khtml-border-radius: 50%; -o-border-radius: 50%; }
    #center-circle span { display: inline-block; margin-top: 50%; line-height: 0; font-weight: bold; color: #22a063; font-size: 30px; }
    body { background: #f0f0f0; padding: 20px; }

 <div id="progress_meter">
    <ul>
        <li id="c1_r"><p><span class="pie_left"></span></p></li>
        <li id="c1_l"><p><span class="pie_right"></span></p></li>
    </ul>
    <div id="center-circle">
        <span>75%</span>
    </div>
</div>