Progress#

Progress bar shows the progress of a task. Uses the native HTML <progress> element with daisyUI styling.

Import#

TSX

import { Progress } from '@sigx/daisyui';

Basic Usage#

TSX

Loading preview...

import { component, render } from 'sigx';
import { Progress } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Progress value={40} class="w-56" />
    );
});

render(<Demo />, "#sandbox");

Colors#

TSX

Loading preview...

import { component, render } from 'sigx';
import { Progress, Stack } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Stack gap="2">
            <Progress value={20} color="primary" class="w-56" />
            <Progress value={30} color="secondary" class="w-56" />
            <Progress value={40} color="accent" class="w-56" />
            <Progress value={50} color="neutral" class="w-56" />
            <Progress value={60} color="info" class="w-56" />
            <Progress value={70} color="success" class="w-56" />
            <Progress value={80} color="warning" class="w-56" />
            <Progress value={90} color="error" class="w-56" />
        </Stack>
    );
});

render(<Demo />, "#sandbox");

Indeterminate#

Omit the value prop for an indeterminate (animated) progress bar.

TSX

Loading preview...

import { component, render } from 'sigx';
import { Progress, Stack } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Stack gap="2">
            <Progress class="w-56" />
            <Progress color="primary" class="w-56" />
        </Stack>
    );
});

render(<Demo />, "#sandbox");

Different Values#

TSX

Loading preview...

import { component, render } from 'sigx';
import { Progress, Stack } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Stack gap="2">
            <Progress value={0} class="w-56" />
            <Progress value={10} class="w-56" />
            <Progress value={40} class="w-56" />
            <Progress value={70} class="w-56" />
            <Progress value={100} class="w-56" />
        </Stack>
    );
});

render(<Demo />, "#sandbox");

Custom Max#

Use the max prop to set a custom maximum value.

TSX

Loading preview...

import { component, render } from 'sigx';
import { Progress, Stack } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Stack gap="2">
            <Progress value={3} max={10} color="primary" class="w-56" />
            <Progress value={7} max={10} color="secondary" class="w-56" />
        </Stack>
    );
});

render(<Demo />, "#sandbox");

Full Width#

Use class="w-full" for a full-width progress bar.

TSX

Loading preview...

import { component, render } from 'sigx';
import { Progress } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Progress value={65} color="success" class="w-full" />
    );
});

render(<Demo />, "#sandbox");

Props#

Prop	Type	Default	Description
`value`	`number`	`undefined`	Current progress value. Omit for indeterminate state
`max`	`number`	`100`	Maximum value
`color`	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'error'`	`undefined`	Color variant
`class`	`string`	`undefined`	Additional CSS classes