Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animated Progress Bar Lightning Web Component Markup
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.