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.

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 white , primary , secondary , dark , success , warning , danger , info , light , 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="white" />
<.spinner color="primary" />
<.spinner color="secondary" />
<.spinner color="dark" />
<.spinner color="success" />
<.spinner color="warning" />
<.spinner color="danger" />
<.spinner color="info" />
<.spinner color="light" />
<.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" />