PineUiPhoenix.Progress (Pine UI v0.1.3)

View Source

Provides progress indicator components for displaying completion status.

The Progress module offers components for showing progress in various forms:

  • bar/1 - Standard progress bar with customizable appearance
  • circle/1 - Circular progress indicator
  • steps/1 - Multi-step progress indicator for workflows

Summary

Functions

Renders a progress bar component.

Renders a circular progress indicator.

Renders a multi-step progress indicator.

Functions

bar(assigns)

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)

circle(assigns)

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)

steps(assigns)

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)