HTML + CSSLoaders

Batterie en charge avec pourcentage

La batterie se remplit segment par segment avec un éclair qui pulse et le pourcentage monte seul, sans JavaScript.

Réglages

Couleur principale#22c55e

Couleur secondaire#facc15

Taille16px

Vitesse1x

Code

index.html

<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 pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Loaders

Voir tout : Loaders

Spinner circulaire

LoadersReact + Motion

Points qui rebondissent

LoadersReact + Motion

Barre de progression indéterminée

LoadersReact + Motion

Skeleton de carte

LoadersReact + Motion

Carré qui devient cercle

LoadersHTML + CSS

Carrés qui changent de place

LoadersHTML + CSS

Cube 3D

LoadersHTML + CSS

Triangle qui se dessine

LoadersHTML + CSS

Où l’utiliser

La recharge est l'une des métaphores de progression les plus claires. Ce loader remplit cinq segments l'un après l'autre, fait pulser un éclair par-dessus et compte le pourcentage de 0 à 100 grâce à une propriété CSS entière enregistrée et un compteur CSS, une astuce moderne qui se passe de script.

Idéal pour les applis de voiture électrique, les tableaux de bord d'appareils et les étapes d'accueil. La couleur principale remplit les segments et la secondaire colore l'éclair.