Photonix

Progress

A linear indicator for task progress.

Preview

Import progress

Usage
"use client";

import { Box, Progress, Stack, Text } from '@photonix/ultimate';

export default function ProgressPreviewExample() {
    return (
        <Box w={360}>
            <Stack gap="4xs">
                <Text variant="body-md">Import progress</Text>
                <Progress value={72} size="medium" />
            </Stack>
        </Box>
    );
}

Component API

Progress

Prop
Type
Default
Description
size
"small" | "medium"
'medium'
Size of the progress bar - small: 4px height - medium: 8px height (default)
value
number
-
Current value (0-100) If not provided, shows indeterminate loading animation

Variants

Sizes

Small and medium heights.

Small

Medium

Sizes
"use client";

import { Flex, Progress, Text } from '@photonix/ultimate';

export default function ProgressSizesExample() {
    return (
        <Flex direction="column" gap="lg" w="100%">
            <Flex direction="column" gap="xs">
                <Text variant="label-sm" color="secondary">Small</Text>
                <Progress size="small" value={75} />
            </Flex>
            <Flex direction="column" gap="xs">
                <Text variant="label-sm" color="secondary">Medium</Text>
                <Progress size="medium" value={50} />
            </Flex>
        </Flex>
    );
}

Indeterminate

Use when progress is unknown.

Indeterminate
"use client";

import { Flex, Progress } from '@photonix/ultimate';

export default function ProgressIndeterminateExample() {
    return (
        <Flex direction="column" gap="lg" w="100%">
            <Progress />
        </Flex>
    );
}

On this page

Preview
Component API
Variants
Sizes
Indeterminate
Photonix UI - React Components, Templates & Figma Design System