SnakeLoader

Animación de carga inspirada en terminales con caracteres bloque Unicode.

SnakeLoader

Demo

Primary

█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄

Secondary

█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄

Success

█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄

<SnakeLoader speed="1.2s" color="primary">Cargando...</SnakeLoader>
<SnakeLoader speed="0.8s" color="secondary">Secondary</SnakeLoader>
<SnakeLoader speed="1.4s" color="success">Success</SnakeLoader>

Props

speed

Duración de la animación CSS.

Fast

█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄

Normal

█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄

Slow

█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄

<SnakeLoader speed="0.6s" color="primary">Fast</SnakeLoader>
<SnakeLoader speed="1.2s" color="primary">Normal</SnakeLoader>
<SnakeLoader speed="2s" color="primary">Slow</SnakeLoader>

color

Color del bloque animado.

P

█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄

S

█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄

W

█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄

D

█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄█▄

<SnakeLoader color="primary">P</SnakeLoader>
<SnakeLoader color="success">S</SnakeLoader>
<SnakeLoader color="warning">W</SnakeLoader>
<SnakeLoader color="danger">D</SnakeLoader>

API

Prop	Tipo	Default	Descripción
speed	string	'1.2s'	Duración de la animación CSS
color	'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'	'primary'	Color del bloque animado

Slot

Slot	Descripción
default	Texto a mostrar junto a la animación

Tokens usados

--color-{name}, --text-muted, --bg-panel, --border, --font-mono, --loader-speed