basecoat/docs/src/components/progress.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Progress	Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.	label id Usage usage

{% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %}

{% lucide "circle-alert" %}

There is no dedicated Progress component in Basecoat.

{% set code_default %}

<script> setTimeout(() => { document.getElementById('demo-progress').style.width = '66%'; }, 500); </script> {% endset %}

{{ code_preview("progress-default", code_default, class="w-full max-w-sm") }}

Usage

Progress bars are pure HTML composition using Tailwind utility classes. Use a container div for the track and an inner div for the indicator. Set the indicator's width with inline styles or via JavaScript.

{% set code_usage %}

{% endset %}

{{ code_block(code_usage) }}