palaze-web Palaze web Docs Github Empezando Componentes Button Card Colors Divider Footer Header Hero Menu Menu-dropdown Menu-item Section Showcase Sidebar Spinner Tooltip Design System Colores Tipografia Formas

Spinner

<plz-spinner> | PlzSpinner

El componentespinnerse utiliza principalmente para indicar que algo está cargando/procesando algún tipo de información. Se suele utilizar haciendo visible el componente spinner al hacer una petición que puede demorar algo de tiempo y cuando se recibe la petición con la información, se vuelve a hacer invisible el componente, de esta forma se indica que algo está sucediendo en ese tiempo de espera.

Ejemplos

Variantes de spinner

Usaremos el atributo variant para elegir la variante de spinner que consideremos entre "simple", "normal", "wave", "atom", "bola".

Considerando la gran variedad de spinners que puedes encontrar en sitios web, se puede decir que estas son las variantes que se asemejan a las más utilizadas. Este componente estará desarrollado en cada sitio web de una manera distinta, en este caso se ha desarrollado intentando mantener el minimalismo, pero a la vez manteniendo su atractivo visual.

Distintos colores de spinner

Usaremos el atributo color-primary, color-secundary o colors-bola dependiendo del spinner que utilicemos.

No hay limitación en cuanto a la elección de colores del spinner, podrás pasar el color mediente los tipos hex, rgb o rgba. A continuación un ejemplo de cada tipo de spinner.

Atributos

Nombre Descripción Posibilidades Por defecto
variant Distintas variantes del componente 'normal' - 'simple' - 'wave' - 'atom' - 'bola' 'normal'
color-primary Color primario del componente hex, rgb o rgba '#023E8A'
color-secondary Color secundario del componente hex, rgb o rgba '#a7b3e9'
color-bola Texto con los colores de las bolas(Ejemplo). hex, rgb o rgba '#023E8A,#a7b3e9, #023E8A,#0096C7, #0077B6,#0096C7'