Skip to main content

Feedback

Progress

Native progress element with deterministic and indeterminate states.

Element
<progress>
Module
@basenative/components
Function
renderProgress

Quick start

Import the render function and call it from your server template.

import { renderProgress } from '@basenative/components';

renderProgress({ value: 65, max: 100, label: 'Upload progress' });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Determinate

Native <progress> element themed with custom properties.

Live render
65%
Source
renderProgress({ value: 65, max: 100, label: 'Upload progress' })

Animated demo

A signal ticks from 0 to 100 every 200ms. Reset to start over.

Live render
0% 0%
Source
const v = signal(0);

effect(() => bar.value = v());
effect(() => out.textContent = v() + '%');

setInterval(() => v.set((v() + 5) % 105), 200);

Options

Arguments accepted by renderProgress().

renderProgress option reference
Option Type Default Description
value number 0 Current value.
max number 100 Maximum value.
label string — Accessible label.