Overview of the Phoenix and LiveView spinner Component
The Mishka Chelekom spinner component is a Phoenix LiveView component that allows developers to create dynamic and flexible loading spinners, perfect for visually indicating loading states within applications. It offers customization in size, color, and type, ensuring a smooth and polished appearance.
This Phoenix LiveView component also supports multiple spinner types such as dots, bars, and more, making it ideal for enhancing both the visual feedback and user interaction. With its responsive design and ease of use, this spinner component ensures a seamless loading experience in any application.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the components design.
Type prop in Phoenix LiveView spinner component
The
type
prop for the
spinner
component allows you to select from several styles for representing loading states. By default, the
type
is set to
default
, which provides a classic circle spinner. Other available options include
dots
,
bars
, and
pinging
, each offering a different animation style to fit various design needs. This flexibility helps tailor the loading indicator to match the aesthetic and functionality of your application.
<!--Default type is type="default", ther is no need to specify it--> <.spinner /> <.spinner type="bars" /> <.spinner type="dots" /> <.spinner type="pinging" />
Color prop in Phoenix LiveView spinner component
The
color
prop for the
spinner
component offers a wide range of predefined color options to customize the spinner’s appearance. You can choose from a variety of colors, including
natural
,
white
,
dark
,
primary
,
secondary
,
success
,
warning
,
danger
,
info
,
silver
,
misc
, and
dawn
. These color options help you seamlessly match the spinner with the overall design theme of your application, providing a cohesive and polished look for your loading animations.
<.spinner color="natural" /> <.spinner color="white" /> <.spinner color="dark" /> <.spinner color="primary" /> <.spinner color="secondary" /> <.spinner color="success" /> <.spinner color="warning" /> <.spinner color="danger" /> <.spinner color="info" /> <.spinner color="silver" /> <.spinner color="misc" /> <.spinner color="dawn" />
Size prop in Phoenix LiveView spinner component
The
size
prop for the
spinner
component provides several options to control the spinner's dimensions. You can choose from sizes like
extra_small
,
small
,
medium
,
large
,
extra_large
,
double_large
,
triple_large
, and
quadruple_large
. This flexibility allows you to adjust the spinner's size to suit different use cases, whether you need a small, subtle loader or a large, prominent visual for ongoing processes.
<.spinner color="info" size="extra_small" /> <.spinner color="info" size="small" /> <.spinner color="info" size="medium" /> <.spinner color="info" size="large" /> <.spinner color="info" size="extra_large" /> <.spinner color="info" size="double_large" /> <.spinner color="info" size="triple_large" /> <.spinner color="info" size="quadruple_large" />