Progress ring/circular in lightning web components(lwc)

HTML Code

<template>
    <lightning-card title="Progress ring in Lightning Web Component"><br/>
        <div>
            <lightning-progress-ring variant="base-autocomplete" value={progress} size="large" class="slds-align_absolute-center"> </lightning-progress-ring>
        </div>
        <div class="slds-text-align--center slds-text-title" style="color:forestgreen;">
            {processStatus}
        </div>
    </lightning-card>
</template>

JS Code

import { LightningElement, track } from 'lwc';

export default class ProgressBarDemoInLWC extends LightningElement {
    progress = 0;
    processStatus = 'In Progress';
    connectedCallback() {
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        this._interval = setInterval(() => {
            this.progress = this.progress + 5;
            this.processStatus = 'Processing => ' + this.progress +'/100';
            if(this.progress === 100) {
                clearInterval(this._interval);
                this.processStatus = 'Completed';
            }
        }, 300);

    }
}

Output