Progress
Displays an indicator showing the completion progress of a task.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/progress.tsx
export function Progress(o) {
const v = Math.max(0, Math.min(100, o.value));
return \`<div class="relative h-2 w-full overflow-hidden rounded-full bg-primary/20 \${o.class || ""}">
<div class="h-full rounded-full bg-primary transition-all" style="width:\${v}%"></div></div>\`;
}Installation
$ bext ui add progressCopy and paste the following into src/components/ui/progress.tsx.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/progress.tsx
export function Progress(o) {
const v = Math.max(0, Math.min(100, o.value));
return \`<div class="relative h-2 w-full overflow-hidden rounded-full bg-primary/20 \${o.class || ""}">
<div class="h-full rounded-full bg-primary transition-all" style="width:\${v}%"></div></div>\`;
}On This Page