Utilitaires CSS/JS & Responsive
Utilitaires, container queries, responsive shapes et bordures animées.
Mis à jour le
De quels petits utilitaires CSS et JavaScript un site moderne a-t-il besoin ?
Les utilitaires sont de petites briques réutilisables pour les besoins courants : barre de progression de lecture, bouton de retour en haut, sélecteur de thème, copie dans le presse-papiers, boutons de partage et de notation, comptes à rebours. Ils côtoient sur cette page des techniques responsives modernes : container queries, formes fluides et bordures en dégradé animées grâce à @property.
Comment choisir, performances et accessibilité
- Ajoutez Scroll Progress Bar aux articles longs, Back to Top aux pages longues, un Theme Toggle qui mémorise le choix et suit
prefers-color-scheme, et Copy to Clipboard à côté d'un extrait de code ou d'un code promo. - Utilisez la Clipboard API plutôt que
execCommand, désormais obsolète, donnez un nom accessible aux boutons qui n'affichent qu'une icône et limitez la fréquence des gestionnaires de scroll et de redimensionnement. - Scroll Progress Bar, Adaptive Card et Gradient Border Spin sont gratuits avec leur code complet ; les autres utilitaires sont inclus dans Premium.
Faites defiler ce contenu pour voir la barre de progression en action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Scroll Progress Bar
Indicateur de progression de lecture avec gradient animé en haut du contenu.
Voir le code source
<div class="demo-preview">
<div class="scroll-progress-container">
<div class="scroll-progress-bar" id="scrollProgressBar"></div>
<div class="scroll-progress-content" id="scrollContent">
<p>Faites defiler ce contenu pour voir la barre de progression en action. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
</div>
</div>.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
box-sizing: border-box
}
.demo-preview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
.scroll-progress-container {
width: 100%;
height: 100px;
background: #1a1a2e;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.scroll-progress-bar {
position: absolute;
top: 0;
left: 0;
height: 4px;
width: 0%;
background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef);
transition: width 0.1s ease-out;
}
.scroll-progress-content {
padding: 20px;
height: 100%;
overflow-y: auto;
color: rgba(255, 255, 255, 0.7);
font-size: 0.85rem;
line-height: 1.6;
}(function() {
const scrollProgressBar = document.getElementById('scrollProgressBar');
if (scrollContent && scrollProgressBar) {
scrollContent.addEventListener('scroll', function() {
const scrollTop = scrollContent.scrollTop;
const scrollHeight = scrollContent.scrollHeight - scrollContent.clientHeight;
const progress = (scrollTop / scrollHeight) * 100;
scrollProgressBar.style.width = progress + '%';
});
}
})();Back to Top Button
Bouton animé qui apparait au scroll avec effet de rebond.
Theme Toggle
Interrupteur de theme avec animation fluide soleil/lune.
Countdown Timer
Compte a rebours style flip-clock avec animation de retournement.
Copy to Clipboard
Bouton de copie avec confirmation animée et feedback visuel.
Rating Stars
Système de notation avec étoiles animées et effet de remplissage.
Like / Heart Button
Bouton coeur avec animation de battement et explosion de particules.
Bookmark Toggle
Icône de signet avec animation de sauvegarde élastique.
Notification Badge
Badge de notification avec animations pulse, bounce et shake.