In recent release salesforce has released progress ring part of SLDS. <https://www.lightningdesignsystem.com/components/progress-ring/#content> 
I am little confused on how to use this with lightning component. My requirement is to show some kind of progress depending on Goal and actual values. Below is the code to start with. I can see the circle with green border. I had to add code into renderer to remove cDATA tags as lightning is not allowing to put the svg directly in the component. (I know there is a separate svg helper file but I am not sure how to reference the icon from the helper file into component so keeping directly into component.)

I think i need to be able to update the d in the path dynamically for this to work.

Any suggestions are welcome!

```
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global">
    <div class="slds-progress-ring">
        <div class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="58">
            <div aura:id="svg_content">
                <![CDATA[
                    <svg viewBox="-1 -1 2 2">
                        <path class="slds-progress-ring__path" id="slds-progress-ring-path" d="M 1 0 A 1 1 0 1 1 0.7289686274214112 -0.684547105928689 L 0 0" />
                    </svg>
                ]]>
            </div>
        </div>
        <div class="slds-progress-ring__content"></div>
    </div>

</aura:component>

```

Renderer

```
({
    // Your renderer method overrides go here

    afterRender: function(component, helper) {
        var svg = component.find("svg_content");
        var value = svg.getElement().innerText;
        value = value.replace("<![CDATA[", "").replace("]]>", "");
        svg.getElement().innerHTML = value;        
    }

})

```