add animation bar to show the blocking in main thread

Author: stomita

force-app/example/default/lwc/myAnimationBar/myAnimationBar.css

@@ -0,0 +1,13 @@
+.container {
+  position: relative;
+  width: 100%;
+  height: 8px;
+  overflow: hidden;
+}
+.bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 8px;
+  background-color: #1212ff;
+}

force-app/example/default/lwc/myAnimationBar/myAnimationBar.html

@@ -0,0 +1,5 @@
+<template>
+  <div class="container">
+    <div class="bar" style={barStyle}></div>
+  </div>
+</template>

force-app/example/default/lwc/myAnimationBar/myAnimationBar.js

@@ -0,0 +1,19 @@
+import { LightningElement } from "lwc";
+
+export default class MyAnimationBar extends LightningElement {
+  barStart = 0;
+  barSize = 50;
+
+  get barStyle() {
+    return `left: ${this.barStart}%; width: ${this.barSize}%;`;
+  }
+
+  connectedCallback() {
+    const updateBar = () => {
+      this.barStart = (this.barStart + 1) % 100;
+      this.barSize = (this.barSize + 2) % 80;
+      requestAnimationFrame(updateBar);
+    };
+    requestAnimationFrame(updateBar);
+  }
+}

force-app/example/default/lwc/myAnimationBar/myAnimationBar.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>49.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

force-app/example/default/lwc/myWebWorkerCmp/myWebWorkerCmp.html

@@ -1,5 +1,6 @@
 <template>
   <div class="slds-p-around_medium">
+    <c-my-animation-bar></c-my-animation-bar>
     <lightning-input
       label="Input Number"
       type="number"