fn_registry/frontend/functions/ui/progress_bar.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant, source_repo, source_license, source_file

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant	source_repo	source_license	source_file
progress_bar	component	typescript	ui	1.0.0	impure	ProgressBar(props: ProgressBarProps): JSX.Element	Barra de progreso con variantes de color y tamaño, buffer, animación, modo indeterminado y display de valor.	progress loading component ui feedback	cn_typescript_core			false		class-variance-authority	false			frontend/functions/ui/progress_bar.tsx	name type required description value number true Valor actual de progreso name type required description max number false Valor máximo (default 100) name type required description buffer number false Valor de buffer secundario (opcional) name type required description showValue boolean false Mostrar porcentaje como texto superpuesto name type required description animated boolean false Activar animación de rayas (stripes) name type required description indeterminate boolean false Modo indeterminado sin valor conocido name type required description size 'sm' | 'md' | 'lg' false Altura de la barra (default md) name type required description color 'primary' | 'success' | 'warning' | 'destructive' false Color semántico (default primary) name type required description label string false aria-label para accesibilidad		false	react	primary success warning destructive	https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library	MIT	frontend/src/components/ui/progress/progress-bar.tsx

Ejemplo

<ProgressBar value={75} color="success" showValue />
<ProgressBar value={0} indeterminate />
<ProgressBar value={50} buffer={80} animated />
<ProgressBar value={30} size="lg" color="warning" />

Notas

El porcentaje se clampea a [0, 100] internamente. El buffer se renderiza como capa semitransparente detrás del fill. Las animaciones de stripes e indeterminate requieren keyframes definidos en el CSS global:

• progress-stripes: background-position de 0 a 1rem
• progress-indeterminate: translateX de -100% a 300%