Overview of the Phoenix LiveView progress Component
The Mishka Chelekom Progress component is a highly customizable and versatile Phoenix LiveView component designed for creating visually dynamic progress bars. Whether for tracking task completion, loading states, or progress indicators, this component supports both horizontal and vertical orientations. It offers flexible styling options with colors, sizes, and gradient variations to match your web application's design requirements.
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.
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 color="natural" /> <.progress color="white" /> <.progress color="primary" /> <.progress color="secondary" /> <.progress color="dark" /> <.progress color="success" /> <.progress color="warning" /> <.progress color="danger" /> <.progress color="info" /> <.progress color="light" /> <.progress color="misc" /> <.progress 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} /> <.progress value={32} /> <.progress value={77} /> <.progress value={100} />
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 color="primary" value={10} /> <.progress_section color="secondary" value={15} /> <.progress_section color="misc" value={10} /> <.progress_section color="danger" value={5} /> <.progress_section color="warning" value={10} /> <.progress_section color="success" value={10} /> <.progress_section color="info" value={5} /> </.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.