HTML + CSSLoaders
Batería cargando con porcentaje
La batería se llena por tramos con un rayo que late y el porcentaje sube solo, sin JavaScript.
Ajustes
16px
1x
Código
<div class="uv-lbc" role="status"><span class="bt"><i></i><i></i><i></i><i></i><i></i><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 2L5 13.5h6L9.5 22 19 9.5h-6z"/></svg></span><span class="pc"></span></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Loaders
Ver todos: LoadersDónde usarlo
Cargar es una de las metáforas de progreso más claras que existen. Este loader llena cinco tramos uno tras otro, hace latir un rayo encima y cuenta el porcentaje de 0 a 100 con una propiedad CSS registrada de tipo entero y un contador CSS, un truco moderno que no necesita script.
Va bien en apps de coches eléctricos, paneles de dispositivos, pasos de bienvenida y cualquier progreso que deba sentirse como ganar energía. El color principal llena los tramos y el secundario tiñe el rayo.