ui-humix-lib/components/html/elements/progress-examples/example-01.html

A simple package for implementinghumix design components in react-based or node.js based projects.

<div x-data="{
        progress: 0,
        progressInterval: null,
    }"
    x-init="
        progressInterval = setInterval(() => {
            progress = progress + 1;
            if (progress >= 100) {
                clearInterval(progressInterval);
            }
        }, 100);
    "
    class="relative w-full h-2 overflow-hidden bg-gray-100 rounded-full">
    <span :style="'width:' + progress + '%'" class="absolute w-24 h-full duration-300 bg-blue-600 ease"></span>
</div>