Un preloader sympa en full CSS3 avec LESS

Aujourd’hui la triste réalité des preloaders sur le web fait qu’en fait ils ne servent à rien. À part à égailler l’expérience utilisateur de l’internaute. Ils ne servent à rien parce qu’il est techniquement impossible “d’écouter” la progression du chargement de quelque chose dans une page web (hormis les sites en flash qui eux sont capables d’afficher des loader qui fonctionnent vraiment). Bon donc concrètement on voit plein de petits loader sympas qui fleurissent sur la toile mais en fait ce sont tous des gif animés… Pourquoi donc des gif animés ? Parce qu’ils sont faciles à trouver (ajaxload.info), faciles à implémenter (en général le gif est positionné en background-image avec un positionnement center center), et en plus ils sont légers.

Bon, je me suis amusé à m’en faire un en full css3 + css transitions 2D donc pas d’image, que des propriétés css. La compatibilité navigateurs est pas top mais pas non plus dégueu et puis c’était sympa à faire 😛

La démo

Le code HTML

Le code CSS

Le css qui en découle est complexe et peu facilement administrable il est donc plus intelligent de le faire en LESS ou en SASS pour profiter des variables au sein du fichier css.

@loaderSize       : 55px;
@radThickness     : @loaderSize/10;
@spinSpeed        : 750ms;
@backgroundColor  : #eee;
@forgroundColor   : #ccc;
@masksColor       : #fff;
@middleCircleSize : 68%;

Dans mon présent exemple j’ai donc choisi d’utiliser LESS et j’ai fais en sorte de rassembler les variables en haut du fichier. De là on peut gérer tous les paramètres importants du spinner, sa taille, ses couleurs, sa vitesse de rotation, etc. Exemple : modifiez @loaderSize pour redimensionner la totalité du loader et des éléments qui le composent (tout en conservant leurs proportions). Ensuite il ne reste plus qu’à compiler vers du CSS et le tour est joué.

• Voir le fichier CSS
• Voir le fichier LESS

Avantages

• Fonctionne sur tous les navigateurs modernes et sur les appareils mobiles.
• Pas de requête HTTP pour charger une image dans la page.
• L’animation est en css3 donc elle est légère et fluide car non-basée sur JavaScript.
• Si on zoom sur le loader (essentiellement dans le cas où l’on surf depuis une tablette) le loader reste parfait, contrairement à une image qui paraîtra toute moche et étirée.
• Taille personnalisable si utilisé avec LESS.
• Permet de frimer en soirée geek 🙂

Inconvénients

• Plus compliqué à administrer et à mettre en place qu’une simple image en background.
• Pas de compatibilité sur IE9 et en dessous (à l’heure où j’écris cet article il y a de bonnes chances que ça marche sur ie10).
• Rajoute du markup HTML dans la page.