PineUiPhoenix.Progress (Pine UI v0.1.3)
View SourceProvides progress indicator components for displaying completion status.
The Progress module offers components for showing progress in various forms:
Summary
Functions
Renders a progress bar component.
Renders a circular progress indicator.
Renders a multi-step progress indicator.
Functions
Renders a progress bar component.
This component creates a horizontal progress bar that visually represents completion progress.
Examples
<.bar value={75} />
<.bar
value={42}
max={100}
label="Uploading..."
show_percentage={true}
size="lg"
variant="indigo"
/>
Options
:value
- Current progress value (required):max
- Maximum value representing 100% completion (optional, defaults to 100):label
- Text label for the progress bar (optional):show_percentage
- Whether to show percentage text (optional, defaults to false):size
- Size of the bar: "sm", "md", "lg" (optional, defaults to "md"):variant
- Color variant: "indigo", "blue", "green", "red", "amber" (optional, defaults to "indigo"):class
- Additional CSS classes for the progress container (optional):bar_class
- CSS classes for the progress bar itself (optional):label_class
- CSS classes for the label text (optional)
Renders a circular progress indicator.
This component creates a circular progress indicator with customizable appearance.
Examples
<.circle value={75} />
<.circle
value={42}
max={100}
label="Uploading..."
show_percentage={true}
size="lg"
variant="indigo"
/>
Options
:value
- Current progress value (required):max
- Maximum value representing 100% completion (optional, defaults to 100):label
- Text label for the progress circle (optional):show_percentage
- Whether to show percentage text inside the circle (optional, defaults to false):size
- Size of the circle: "sm", "md", "lg", "xl" (optional, defaults to "md"):variant
- Color variant: "indigo", "blue", "green", "red", "amber" (optional, defaults to "indigo"):track_width
- Width of the circle track: "thin", "normal", "thick" (optional, defaults to "normal"):class
- Additional CSS classes for the progress container (optional):circle_class
- CSS classes for the circle itself (optional):label_class
- CSS classes for the label text (optional)
Renders a multi-step progress indicator.
This component creates a horizontal step indicator for processes or workflows.
Examples
<.steps
steps={["Cart", "Shipping", "Payment", "Confirmation"]}
current_step={2}
/>
<.steps
steps={[
%{title: "Account", description: "Personal information"},
%{title: "Profile", description: "Additional details"},
%{title: "Complete", description: "Review submission"}
]}
current_step={1}
variant="green"
/>
Options
:steps
- List of step titles or maps with title and description (required):current_step
- Index of the current active step (0-based, required):orientation
- Direction of the steps: "horizontal" or "vertical" (optional, defaults to "horizontal"):variant
- Color variant: "indigo", "blue", "green", "red", "amber" (optional, defaults to "indigo"):class
- Additional CSS classes for the steps container (optional):connector_class
- CSS classes for the connecting lines (optional):step_class
- CSS classes for the step indicators (optional)