How to use progress ring with lightning component

You need to use custom rendering. This is not a complete example (it doesn't show any icons/variants), but this will get you started:

---

Component

<aura:component >
    <aura:attribute name="value" type="Integer" default="0" />
    <aura:handler name="init" value="{!this}" action="{!c.updateView}" />
    <aura:handler name="change" value="{!v.value}" action="{!c.updateView}" />
    <div class="slds-progress-ring">
        <div id="progressContainer" class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{!v.value}">

        </div>
        <div class="slds-progress-ring__content">
        </div>
    </div>
</aura:component>

---

Controller

({
    updateView: function(component, event, helper) {
        // Does nothing *now*, but would be responsible for
        // choosing the correct css class for the progress area, etc.
    }
})

---

Renderer

({
    // Create SVG, path, populate with default values from controller
    render: function(component, helper) {
        var result = this.superRender(),
            xmlns = "http://www.w3.org/2000/svg",
            updateContainer = result[0].querySelector("#progressContainer"),
            value = component.get("v.value"),
            dValue = "M 1 0 A 1 1 0 "+Math.floor(value / 50)+" 1 "+
                Math.cos(2 * Math.PI * value / 100)+" "+
                Math.sin(2 * Math.PI * value / 100)+" L 0 0",
            svg = document.createElementNS(xmlns,"svg"),
            path = document.createElementNS(xmlns,"path");
        svg.setAttributeNS(null,"viewBox", "-1 -1 2 2");
        path.setAttributeNS(null, "class", "slds-progress-ring__path");
        path.setAttributeNS(null, "d", dValue);
        svg.appendChild(path);
        updateContainer.appendChild(svg);
        return result;
    },
    // Update the progress bar on a rerender event
    rerender: function(component, helper) {
        var value = component.get("v.value"),
            dValue = "M 1 0 A 1 1 0 "+Math.floor(value / 50)+" 1 "+
                Math.cos(2 * Math.PI * value / 100)+" "+
                Math.sin(2 * Math.PI * value / 100)+" L 0 0",
            svg = component.getElement().querySelector("svg"),
            path = svg.childNodes[0];
        this.superRerender();
        path.setAttributeNS(null, "d", dValue);
    }
})

Note that this implementation uses an Integer value from 0-100. If you want to use a different scale (e.g. 0-1 floating point), adjust accordingly.

There is also a great LWC implementation on Github here: https://github.com/texei/progress-ring