@ayonli/jsext/dialog/browser/Progress.ts

A JavaScript extension package for building strong and modern applications.

import { useColorTheme } from "./util.ts";

const lightColor = "#333";
const darkColor = "#ccc";

export default function Progress() {
    const div = document.createElement("div");
    const progress = document.createElement("progress");
    const span = document.createElement("span");
    const { theme, onChange } = useColorTheme();

    div.style.width = "100%";
    div.style.display = "flex";
    div.style.justifyContent = "center";
    div.style.alignItems = "center";
    div.style.gap = "0.5em";

    progress.max = 100;
    progress.style.width = "100%";

    span.style.color = theme === "light" ? lightColor : darkColor;
    span.style.fontSize = "1em";

    onChange((theme) => {
        span.style.color = theme === "light" ? lightColor : darkColor;
    });

    div.appendChild(progress);
    div.appendChild(span);

    return {
        element: div,
        setValue: (value: number) => {
            progress.value = value;
            span.textContent = `${value}%`;
        }
    };
}