Progress

New version v0.0.4 🚀

Interactive progress bars for Phoenix LiveView with horizontal and vertical options, colors, sizes, gradients, and chunked or segmented progress sections.

Installation:

mix mishka.ui.gen.component progress

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless JS

Overview of the Phoenix LiveView progress Component

The Phoenix LiveView Progress component is a highly customizable and versatile component designed for creating visually dynamic progress bars including horizontal, vertical, ring, and semi-circle progress indicators.

88%

This Phoenix LiveView component also supports advanced features like chunked progress bars, allowing you to visually represent multiple stages of progress within a single bar. Additionally, the gradient variant adds dynamic styling, enabling smooth color transitions that enhance the visual appeal of your progress indicators.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.

Base variant

<.progress />

Default variant

The default variant of the progress component offers a wide range of color options to suit different design needs. You can customize the progress bar's appearance by choosing from the following colors: white, primary, secondary, dark, success, warning, danger, info, silver, misc, and dawn. These options ensure that your progress bar can seamlessly integrate with your application's overall color scheme.

<.progress variant="default" color="natural" />
<.progress variant="default" color="white" />
<.progress variant="default" color="primary" />
<.progress variant="default" color="secondary" />
<.progress variant="default" color="dark" />
<.progress variant="default" color="success" />
<.progress variant="default" color="warning" />
<.progress variant="default" color="danger" />
<.progress variant="default" color="info" />
<.progress variant="default" color="light" />
<.progress variant="default" color="misc" />
<.progress variant="default" color="dawn" />

Gradient variant

The gradient variant of the progress component introduces a visually appealing gradient effect, allowing you to apply smooth transitions between colors. You can use any of the following color options for the gradient effect: natural, primary, secondary, success, warning, danger, info, silver, misc, and dawn.

<.progress variant="gradient" color="natural" />
<.progress variant="gradient" color="primary" />
<.progress variant="gradient" color="secondary" />
<.progress variant="gradient" color="dark" />
<.progress variant="gradient" color="success" />
<.progress variant="gradient" color="warning" />
<.progress variant="gradient" color="danger" />
<.progress variant="gradient" color="info" />
<.progress variant="gradient" color="light" />
<.progress variant="gradient" color="misc" />
<.progress variant="gradient" color="dawn" />

Value prop

The value prop shows the percentage of progress completed, ranging from 0 to 100. For example, setting the value to 50 will indicate that 50% of the task or process is complete, visually reflecting the progress on the bar.

<.progress value={4} />
<.ring_progress value={32} />
<.semi_circle_progress value={77} />

Variation prop

The variation prop allows you to define the orientation of the progress bar, with options for either horizontal or vertical. By default, the progress bar is set to horizontal, making it ideal for typical linear progress indicators. However, when vertical is selected, the progress bar is displayed in an upright format, offering a different visual representation of progress.

<!--Horizontal-->
<.progress />
<.progress variation="horizontal" />

<.progress variation="vertical" />

Size prop

The size prop adjusts the visual dimensions of the progress bar for both horizontal and vertical orientations. It offers predefined options such as extra_small, small, medium, large, extra_large, double_large, triple_large, and quadruple_large. In horizontal mode, this prop changes the height of the progress bar, while in vertical mode, it adjusts the width and overall height.

<.progress size="extra_small" />
<.progress size="small" />
<.progress size="medium" />
<.progress size="large" />
<.progress size="extra_large" />
<.progress size="double_large" />
<.progress size="triple_large" />
<.progress size="quadruple_large" />

<.progress variation="vertical" size="extra_small" />
<.progress variation="vertical" size="small" />
<.progress variation="vertical" size="medium" />
<.progress variation="vertical" size="large" />
<.progress variation="vertical" size="extra_large" />
<.progress variation="vertical" size="double_large" />
<.progress variation="vertical" size="triple_large" />
<.progress variation="vertical" size="quadruple_large" />

Progress section component

All the previously mentioned props, can also be applied to each section when using the progress_section within the progress component.

<.progress>
  <.progress_section color="dawn" value={80} />
</.progress>

Chunked or segmented progress in Phoenix LiveView

By utilizing progress_section, you can easily create chunked(or segmented) progress bars within the progress component. By defining multiple sections, each with its own value, color, and variant, you can visually segment the progress bar into distinct parts. This feature allows for more granular representation of progress, such as showing different stages of a process or multiple tasks within the same progress bar.

<.progress>
  <.progress_section csp_nonce={@csp_nonce} color="primary" value={10} />
  <.progress_section csp_nonce={@csp_nonce} color="secondary" value={15} />
  <.progress_section csp_nonce={@csp_nonce} color="misc" value={10} />
  <.progress_section csp_nonce={@csp_nonce} color="danger" value={5} />
  <.progress_section csp_nonce={@csp_nonce} color="warning" value={10} />
  <.progress_section csp_nonce={@csp_nonce} color="success" value={10} />
  <.progress_section csp_nonce={@csp_nonce} color="info" value={5} />
</.progress>

<!--Vertical-->
<.progress
  variation="vertical"
  size="w-5 height-[350px]"
>
  <.progress_section value={60} csp_nonce={@csp_nonce} variation="vertical">
  </.progress_section>
  <.progress_section value={30} csp_nonce={@csp_nonce} variation="vertical">
  </.progress_section>
  <.progress_section value={10} csp_nonce={@csp_nonce} variation="vertical">
  </.progress_section>
</.progress>

label slot

The label slot in the Progress module provides a flexible mechanism for embedding custom values or text within each chunk of a progress bar or the overall progress itself. This slot allows developers to include dynamic label, such as progress percentages, texts, or detailed information, directly inside the progress component.

If you want to include labels within each chunk, it's better to use larger progress sizes, such as extra_large or bigger.

<.progress size="extra_large">
  <.progress_section color="primary" value={10}>
    <:label class="fonte-bold">Images</:label>
  </.progress_section>
  <.progress_section color="secondary" value={5}>
    <:label class="text-white">15%</:label>
  </.progress_section>
  <.progress_section color="misc" value={30}>
   <:label class="font-bold">Other</:label>
  </.progress_section>
</.progress>

<.progress size="extra_large">
  <.progress_section csp_nonce={@csp_nonce} color="misc" value={20}>
    <:label class="font-bold">80%</:label>
  </.progress_section>
</.progress>

CSP

If you have enabled the CSP header on your website, you must pass the csp_nonce parameter when using the progress and progress_section components. The reason for this is that part of these components is written inline to avoid the need for state.

Ring progress component

The Ring Progress component is a solid circle progress indicator and does not support sectional divisions like the horizontal or vertical progress bars right now. Each Ring Progress instance represents a single, continuous circular progress value.

<.ring_progress />

Ring progress Value prop

The value prop in the Ring Progress component represents the current progress percentage, accepting values from 0 to 100, where 0 indicates no progress and 100 indicates completion of the task or process.

<.progress value={4} />
<.ring_progress value={32} />
<.semi_circle_progress value={77} />

Ring progress Max prop

The max prop in the Ring Progress component allows you to customize the maximum value of the progress scale, defaulting to 100 if not specified, enabling you to work with different progress scales while maintaining proportional visual representation.

<.ring_progress value={30} max={60} />
<.ring_progress value={30} max={100} />

Ring progress Size prop

<.ring_progress size={150} />

Ring progress thickness prop

The thickness prop adjusts the width of the progress ring's stroke, allowing you to create thinner or thicker progress indicators. The default value is 10 pixels, and you can customize it based on your design needs.

<.ring_progress thickness={4} />

Ring progress Color prop

The color prop in the Ring Progress component allows you to customize the color theme of the progress indicator. Available color options include: natural, primary, secondary, success, warning, danger, info, silver, misc, and dawn. The default value is natural.

<.ring_progress color="natural" />
<.ring_progress color="white" />
<.ring_progress color="primary" />
<.ring_progress color="secondary" />
<.ring_progress color="dark" />
<.ring_progress color="success" />
<.ring_progress color="warning" />
<.ring_progress color="danger" />
<.ring_progress color="info" />
<.ring_progress color="light" />
<.ring_progress color="misc" />
<.ring_progress color="dawn" />

Ring progress Label prop

The label prop allows you to add descriptive text inside the ring progress indicator. The label appears centered within the ring, making it useful for displaying progress percentages, status messages, or other relevant information about the task being tracked.

<.ring_progress label="Uploading" />

Ring progress Linecap prop

The linecap prop defines how the ends of the progress bar's stroke are drawn. It accepts three values: butt (flat ends), round (rounded ends), or square (square ends that extend beyond the path). This property can significantly affect the visual appearance of your progress indicator's endpoints.

<.ring_progress linecap="butt" />
<.ring_progress linecap="round" />
<.ring_progress linecap="square" />

Semi circle progress component

The Semi Circle Progress component creates a visually appealing half-circle shape to display progress, with customizable features like size, thickness, orientation, colors, and labels.

77%

<.semi_circle_progress />

Semi circle Value prop

The value prop in the Semi Circle Progress component represents the current progress percentage, accepting values from 0 to 100. For example, setting value={50} indicates that 50% of the task or process is complete. The progress arc will draw accordingly from 0% to the specified value, providing a clear visual representation of the completion status.

20%

80%

<.semi_circle_progress value={20} />

Semi circle Size prop

The size prop in the Semi Circle Progress component controls the overall diameter of the progress indicator in pixels. The default size is 200 pixels, but you can customize this value to create smaller or larger progress indicators based on your design needs.

65%

<.semi_circle_progress size={150} />

Semi circle Thickness prop

The thickness prop in the Semi Circle Progress component controls the width of the progress arc. The default value is 12 pixels, and you can adjust it to create thinner or thicker progress indicators based on your design requirements. For example, setting thickness={6} creates a thinner line, while thickness={14} creates a thicker one.

70%

20%

19%

<.semi_circle_progress thickness={2} />

Semi circle Orientation prop

The orientation prop in the Semi Circle Progress component determines the direction the semi-circle faces. It accepts two values: up (default) where the arc points upward, or down where the arc points downward. This allows you to create versatile progress indicators that can be oriented according to your design needs.

55%

95%

<.semi_circle_progress orientation="up" />
<.semi_circle_progress orientation="down" />

Semi circle Fill direction prop

The fill_direction prop in the Semi Circle Progress component determines the direction in which the progress arc is drawn. It accepts two values: left-to-right (default) or right-to-left. This allows you to customize the animation direction of the progress indicator to match your design preferences or to create visual variety in your interface.

30%

60%

<.semi_circle_progress fill_direction="left-to-right"/>
<.semi_circle_progress fill_direction="right-to-left" />

Semi circle Transition duration prop

The transition_duration prop in the Semi Circle Progress component controls the animation speed when the progress value changes. It accepts a value in milliseconds, where a higher number results in a slower, smoother transition and a lower number creates a faster transition. The default value is 300 milliseconds, which provides a balanced animation speed suitable for most use cases.

33%

75%

<.semi_circle_progress transition_duration={150} />

Semi circle Linecap prop

The linecap prop in the Semi Circle Progress component determines how the ends of the progress arc are rendered. It accepts three values: butt (flat ends), round (rounded ends), or square (square ends that extend beyond the path). This styling option can significantly impact the visual appearance of your progress indicator's endpoints, allowing you to choose between sharp or smooth transitions.

68%

<.semi_circle_progress linecap="butt" />
<.semi_circle_progress linecap="round" />
<.semi_circle_progress linecap="square" />

Semi circle Color prop

The color prop in the Semi Circle Progress component allows you to customize the color theme. Available color options include: natural, primary, secondary, success, warning, danger, info, silver, misc, and dawn. If not specified, it defaults to natural.

50%

<.semi_circle_progress color="natural" />
<.semi_circle_progress color="white" />
<.semi_circle_progress color="primary" />
<.semi_circle_progress color="secondary" />
<.semi_circle_progress color="dark" />
<.semi_circle_progress color="success" />
<.semi_circle_progress color="warning" />
<.semi_circle_progress color="danger" />
<.semi_circle_progress color="info" />
<.semi_circle_progress color="light" />
<.semi_circle_progress color="misc" />
<.semi_circle_progress color="dawn" />

Semi circle Label prop

The label prop enables you to add descriptive text to display alongside the progress indicator, providing context or status information about the progress being shown.

Uploading

Completed

<.semi_circle_progress label="Uploading" />

The :tooltip slot allows you to show contextual information when hovering or clicking on a progress section. You can define a label as the trigger, and customize position, style, and interaction behavior. This is especially useful when multiple progress sections are used and you want to provide additional information for each segment.

Available attributes for the :tooltip slot:

label – Required. Text or UI element that acts as the tooltip trigger.
position – Optional. Defines where the tooltip appears relative to the trigger. Supported values: "top", "bottom", "left", "right". Default: "top". use "left" and "right" for vertical variation
clickable – Optional. If set to true, tooltip shows on click instead of hover.
class – Optional. Additional custom classes for tooltip content styling.

<.progress size="extra_large">
  <.progress_section color="primary" value={10}>
    <:tooltip label="Images" position="top" class="font-bold">
      Tooltip content for Images
    </:tooltip>
  </.progress_section>

  <.progress_section color="secondary" value={5}>
    <:tooltip label="15%" position="bottom" class="text-white">
      Only 5% left
    </:tooltip>
  </.progress_section>

  <.progress_section color="misc" value={30}>
    <:tooltip label="Other" position="top" clickable={true} class="font-bold">
      This section represents other files
    </:tooltip>
  </.progress_section>
</.progress>

<.progress size="extra_large">
  <.progress_section csp_nonce={@csp_nonce} color="misc" value={20}>
    <:tooltip label="80%" position="right" clickable={true} class="font-bold">
      80% of content processed
    </:tooltip>
  </.progress_section>
</.progress>

<!--Vertical-->
<.progress
  variation="vertical"
  size="w-5 height-[350px]"
>
  <.progress_section value={60} csp_nonce={@csp_nonce} variation="vertical">
    <:tooltip label="1" position="right">Step 1</:tooltip>
  </.progress_section>
  <.progress_section value={30} csp_nonce={@csp_nonce} variation="vertical">
    <:tooltip label="2" position="right">Step 2</:tooltip>
  </.progress_section>
  <.progress_section value={10} csp_nonce={@csp_nonce} variation="vertical">
    <:tooltip label="3" position="right">Step 3</:tooltip>
  </.progress_section>
</.progress>

Progress Component Props

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction.
value	integer	No	The current value representing the progress completion.
variation	string	No	Defines the layout orientation of the component. Values: horizontal, vertical. Default is horizontal.
color	string	No	Determines the color theme of the progress bar. Default is base.
variant	string	No	Determines the style of the progress bar. Default is base.
size	string	No	Determines the overall size of the elements, including padding and font size. Values: extra_small, small, medium, large, extra_large, double_large, triple_large, quadruple_large. Default is small.
content	slot	No	Slot to display any content within each chunk of progress. Slot attributes include: class (optional, custom CSS class for styling)
class	string	No	Custom CSS class for additional styling. Default is nil.
csp_nonce	string	No	You use it when you have activated the CSP header and set the value as well.

Progress Section Component Props

Name	Type	Required	Description
value	integer	No	The value of this progress section. Default is 0.
class	string	No	Custom CSS class for additional styling. Default is nil.
label	slot	No	Slot to add text content or percentage values within each section of the progress bar. Slot attributes include: class (optional, custom CSS class for styling)
tooltip	slot	No	Slot to display a tooltip on hover or click for each progress section. Attributes: label (trigger text), position (top, bottom, left, right), clickable (optional, show on click), class (optional, custom styling).
variation	string	No	Defines the layout orientation of the component. Values: horizontal, vertical. Default is horizontal.
color	string	No	Determines the color theme of the progress section. Default is white.
rounded	string	No	Determines the border radius. Default is none.
variant	string	No	Determines the style of the card. Supported values: default, gradient.
color	string	No	Determines the color theme of the card. Supported values: natural, primary, secondary, success, warning, danger, info, silver, misc, dawn. Default is natural.The default variant have extra color options: dark and white, which in both light mode and dark mode, these colors are always the same.
csp_nonce	string	No	You use it when you have activated the CSP header.

Ring Progress Component Props

Name	Type	Required	Description
id	string	Yes	A unique identifier used to manage state and interaction.
value	integer	Yes	The current value representing the progress completion.
max	integer	No	The maximum value the progress can reach. Default is 100.
size	integer	No	The size of the progress component (typically diameter in pixels). Default is 120.
thickness	integer	No	The thickness of the progress stroke. Default is 10.
color	string	No	Determines color theme. Default is natural.
label	string	No	Optional label to be displayed with the progress component. Default is nil.
class	string	No	Custom CSS class for additional styling. Default is nil.
linecap	string	No	Defines the shape of the progress stroke's end. For example, round for rounded edges. Default is nil.

Semi circle Progress Component Props

Name	Type	Required	Description
id	string	No	HTML ID for the container. Default is nil.
value	integer	Yes	Progress value (0 to 100).
size	integer	No	Diameter of the circle in pixels. Default is 200.
thickness	integer	No	Stroke width. Default is 12.
orientation	string	No	Orientation of the circle. Values: up, down. Default is up.
fill_direction	string	No	Direction of fill. Example: left-to-right. Default is left-to-right.
transition_duration	integer	No	Transition duration in milliseconds. Default is 300.
class	string	No	Custom CSS class for additional styling. Default is nil.
linecap	string	No	Add radius to the stroke ends of the progress (e.g., round). Default is nil.
color	string	No	Tailwind-compatible stroke color (e.g., stroke-red-500). Default is natural.
label	string	No	Optional label to display. Default is nil.

Progress CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - gradient - base	Yes
`--color`	string	base - natural - white - primary - secondary - dark - success - warning - danger - info - silver - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large - double_large - triple_large - quadruple_large	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large - full	Yes
`--type`	string	progress - progress_section	Yes
`--only`	string	progress - progress_section	Yes
`--module`	string	Something	NO