Working example of Material Design LinearProgress component

Question

Attached are the pseudo-codes for an attempt to make a working prototype of a Linear Progress component.

HTML

<script src="https://unpkg.com/material-components-web@0.42.1/dist/material-components-web.min.js"></script>
...
<div role="progressbar" class="mdc-linear-progress" id="my-progress-bar">
    <div class="mdc-linear-progress__buffering-dots"></div>
    <div class="mdc-linear-progress__buffer"></div>
    <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
    </div>
    <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
        <span class="mdc-linear-progress__bar-inner"></span>
    </div>
</div>

JavaScript

const overallProgress = mdc.linearProgress.MDCLinearProgress.attachTo(document.getElementById('my-progress-bar'));
overallProgress.setProgress(0.5);

The aforementioned codes are intended to show a 50% progress. The prototype is not functional. Which part of it could have gone wrong? The below references are the best that I can get from the official reference documents.

References

1. Linear Progress, Material Design for Web
2. Linear Progress Demo, Material Design for Web

Answer 1

TL;DR

Simply replace the JavaScript line overallProgress.setProgress(0.5); into overallProgress.progress=0.5;

Details

I dig the source-code of MDCLinearProgress and it turns out it was implemented to using JavaScript function setters. The way function-setters work is by declaring in the class as methods but to actually set the value is by treating it like a property.

So instead of using setProgress(value), replace it with progress=value.