Tu le trouveras sur la page d'accueil des éditions 2 et 3, sous l’édito. Le code original est de jreaux62 sur codepen.io.
Deux exemples de la même animation dans l'édition 3: le smiley de la première page démos et les deux mûres qui se baladent dans un article DIY. Le code original est sur stackoverflow.com.
- En haut de cette page (header) j’ai opté pour le "chargeur-CSS_points-suspension" de HubSpot France sur codepen.io (code et démo) en changeant juste un peu la couleur orange pour #ff6600, mon orange fétiche. Sur la page démos je l'ai mis avec les couleurs light dark du site.
A noter que sur cette même page codepen dédiée à HubSpot France se trouvent aussi 8 autres loaders très intéressants en css.
- Ci-dessous et dans l'autre colonne j'ai placé trois loaders issus de la collection de Vineeth TR sur Github qui en comporte 349 (cercles, bulles, textes, objets...). Ici aussi j'ai modifié le orange, et ajouté un mini bout de code pour accorder la deuxième couleur au mode light dark du site:
CSS (extrait), rien ne change dans le code html:
--color-1: #ff6600;
--color-2: light-dark(#008000, (#00cccc);
- En bas de la page d'accueil a pris place un loader du blog de lulu, lui aussi passé en orange #ff6600.
Ils arrivent dans cette édition, avec:
- Un slider d’images horizontal automatique, que tu verras en version ralentie avec 2 images seulement sur la page d’accueil et en version rapide avec 8 images sur la page zoom. J'ai trouvé le code en le cherchant avec le moteur de recherche de mon navigateur (Brave) et la réponse est un mix AI de plusieurs codes, que tu trouveras dans le code de mes pages aux emplacements suivants:
Page d'accueil: css = lignes 176 à 201 / html = lignes 349 à 358
Page zoom: css = lignes 128 à 154 / html = lignes 217 à 239
- Un slider d’images vertical à animer avec le curseur latéral, qui se trouve sur la page archives . Le code original est dans une discussion du forum openclassrooms (Anonyme).
Et pour finir, de nombreux autres sliders d'images en css pur ou avec javascript t'attendent ici:
- Comment faire défiler des images horizontalement avec CSS - Sur web-eau.net
- 40 CSS Slider Examples: Pure CSS Carousels & Image Sliders for 2026 - Sur prismic.io
- 80+ CSS Sliders: Best Free Image Slider Code Snippets - Sur freefrontend.com