Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript for the Animated Bar Lightning Web Component
/* eslint-disable no-console */
import { LightningElement, track } from 'lwc';
export default class AnimatedBar extends LightningElement {
@track value = 0;
handleInputValueChanged(event) {
window.clearTimeout(this.delayTimeout);
const final = event.target.value;
if ( (final) && (final!=this.value) )
{
let self=this;
// eslint-disable-next-line @lwc/lwc/no-async-operation
this.delayTimeout=setTimeout(() => {
let increment=1;
if (final<this.value) {
increment=-1;
}
console.log('Final = ' + final + ' and value = ' + this.value);
console.log('Increment = ' + increment);
// eslint-disable-next-line @lwc/lwc/no-async-operation
let timeoutRef = setInterval(function() {
self.value+=increment;
console.log('In set interval');
console.log('value = ' + self.value);
console.log('final = ' + final);
if (self.value==final) {
console.log('Clearing interval');
clearInterval(timeoutRef);
}
}, 100);
}, 300);
}
}
get width() {
return `width: ${this.value}%`;
}
}
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.