Animated Progress Bar Lightning Web Component Markup

animatedBar.html

<template>
        <div class="slds-m-around_small">
            <div class="slds-text-heading_large slds-m-bottom_small">Progress Bar Demo</div>
            <div class="slds-m-bottom_large">
                <label>Enter value : <lightning-input type="number" name="seven" value="0" placeholder="Enter the amount..." onchange={handleInputValueChanged}></lightning-input></label>
            </div>
            <div>
                <div style="width:25%" class="slds-progress-bar slds-progress-bar_circular slds-progress-bar_large"
                        aria-valuemin="0" aria-valuemax="100" aria-valuenow={amount} role="progressbar">
                    <span class="slds-progress-bar__value" style={width}>
                        <span class="slds-assistive-text">Progress: {value} %</span>
                    </span>
                    <div class="slds-text-align_center">{value}
                       /
                    100</div>
                </div>
            </div>
        </div>
</template>