Des couleurs à accorder, un dégradé ou une grille CSS à écrire, une maquette de post à montrer : ces outils rendent un résultat prêt à copier ou à télécharger, sans compte et sans logiciel.
Galerie d'animations de chargement en CSS pur
Un indicateur de chargement bien choisi rend l'attente moins frustrante et votre interface plus soignée. Cette galerie propose huit loaders en CSS pur : anneau, points sautillants, barres d'égaliseur, pulsation, vague, carré 3D… Choisissez un modèle, ajustez la couleur, la taille et la vitesse, puis copiez le HTML et le CSS générés : aucune image, aucune bibliothèque JavaScript, juste quelques lignes d'animation @keyframes qui fonctionnent dans tous les navigateurs. Les animations utilisent transform et opacity, les propriétés les plus performantes à animer, pour un rendu fluide même sur mobile.
HTML
<div class="loader"></div>
CSS
.loader {
width: 48px;
height: 48px;
border: 6px solid #6366f133;
border-top-color: #6366f1;
border-radius: 50%;
animation: ld-ring 1.2s linear infinite;
}
@keyframes ld-ring { to { transform: rotate(360deg); } }Loaders en CSS pur, sans image ni JavaScript : copiez le HTML et le CSS, c'est tout.
Le CSS est plus léger (quelques lignes contre des dizaines de kilo-octets), net sur tous les écrans, recolorable instantanément et fluide. Un GIF animé est pixellisé, pèse lourd et ne s'adapte pas à votre charte graphique.
Copiez le bloc HTML à l'endroit voulu, ajoutez le CSS dans votre feuille de style, c'est tout. Pour le masquer une fois le contenu chargé, retirez l'élément du DOM ou passez-le en display: none via JavaScript.
Un résultat qui vous paraît faux, une valeur périmée, un cas qui manque ? Signalez-le à contact@topapps.fr