can/demos/forms/bindings-attribute-tochild.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<progress-bar></progress-bar>

<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty" id="demo-source">
import { StacheElement } from "can";

class ProgressBar extends StacheElement {
    static view = `
        <progress value:from="this.progressValue" max="100"></progress>
    `;

    static props = {
        progressValue: {
            value({ resolve }) {
                var value = 0;

                resolve(value);

                setInterval(function makeProgress() {
                    let newValue = value + Math.floor( Math.random() * 10 );
                    value = newValue > 100 ? 0 : newValue;

                    resolve(value);
                }, 500);
            }
        }
    };
};
customElements.define("progress-bar", ProgressBar);
</script>