/*
================================================================================
BARRE DE PROGRESSION DE LECTURE - SYSTÈME COMPLET
================================================================================
Version 2.0 - Barre de progression améliorée avec fonctionnalités avancées
Auteur : Emile SNYERS
Date : 2025-06-21
Fichier : 6-progress-bar-reading-Emile-SNYERS.css
/* LICENCE ET CONDITIONS D'UTILISATION
----------------------------------------
Emile SNYERS - Tous droits réservés - 2025
📢Toute utilisation nécessite une autorisation préalable du propriétaire (Emile SNYERS).
🚨Usage non commercial uniquement.
Type d'utilisation autorisée:
- Utilisation pour des projets éducatifs ou associatifs.
- Ne pas redistribuer sans autorisation.
Critères d'attribution d'une autorisation:
- Contribution à des projets éducatifs ou associatifs.
- L'entraide et le partage du savoir.
- Contribue à la promotion de l'éducation et de la culture.
----------------------------------------
DESCRIPTION FONCTIONNELLE :
Cette barre de progression indique visuellement l'avancement de lecture d'une page.
Elle se remplit automatiquement en fonction du défilement de l'utilisateur.
FONCTIONNALITÉS INCLUSES :
✅ Barre de progression responsive
✅ Animations fluides et personnalisables
✅ Système de thèmes (minimal, standard, premium)
✅ Indicateurs de progression (pourcentage, temps estimé)
✅ Accessibilité optimisée (respect prefers-reduced-motion)
✅ Points de repère visuels
✅ Effets visuels optionnels (gradient, brillance)
✅ Support multi-navigateurs
UTILISATION :
1. Inclure ce fichier CSS dans votre projet
2. Ajouter l'élément HTML :
3. Inclure le JavaScript correspondant pour la fonctionnalité
4. Personnaliser via les variables CSS selon vos besoins
PERSONNALISATION :
Modifiez les variables CSS pour adapter l'apparence :
- --progress-bar-height : Hauteur de la barre
- --progress-bar-color : Couleur principale
- --progress-bar-bg : Couleur de fond
- --progress-bar-animation-speed : Vitesse des animations
================================================================================
*/
/* ====================================================================
VARIABLES CSS POUR LA PERSONNALISATION
==================================================================== */
/*
* Variables spécifiques à la barre de progression
* Permet une personnalisation facile sans modifier le code principal
*/
:root {
/* === DIMENSIONS === */
--progress-bar-reading-height: 6px; /* Hauteur de la barre principale */
--progress-bar-reading-height-hover: 12px; /* Hauteur au survol */
--progress-bar-reading-border-radius: 0 0 6px 0; /* Bordure arrondie */
/* === COULEURS === */
--progress-bar-reading-primary: var(--theme-primary, #3498db); /* Couleur principale */
--progress-bar-reading-secondary: var(--theme-secondary, #e3f2fd); /* Couleur secondaire */
--progress-bar-reading-accent: var(--theme-accent, #f39c12); /* Couleur d'accent */
--progress-bar-reading-background: var(--theme-background, #fff); /* Fond de la barre */
/* === ANIMATIONS === */
--progress-bar-reading-transition-speed: 0.4s; /* Vitesse des transitions */
--progress-bar-reading-gradient-speed: 3s; /* Vitesse du gradient animé */
--progress-bar-reading-shine-speed: 2s; /* Vitesse de l'effet brillance */
/* === Z-INDEX === */
--progress-bar-reading-z-index: 1000; /* Position dans l'empilement */
/* === OPACITÉ === */
--progress-bar-reading-opacity: 1; /* Opacité normale */
--progress-bar-reading-opacity-hover: 1; /* Opacité au survol */
}
/* ====================================================================
BARRE DE PROGRESSION PRINCIPALE - VERSION STANDARD
==================================================================== */
/*
* Conteneur principal de la barre de progression
* Positionnement fixe en haut de l'écran pour un suivi constant
*/
.progress-bar-reading-page-Emile-SNYERS {
/* === POSITIONNEMENT === */
position: fixed; /* Position fixe relative au viewport */
top: 0; /* Alignement en haut de l'écran */
left: 0; /* Départ depuis le bord gauche */
/* === DIMENSIONS === */
width: 0%; /* Largeur initiale (sera modifiée par JS) */
height: var(--progress-bar-reading-height); /* Hauteur configurable */
/* === APPARENCE === */
background: linear-gradient(
90deg,
var(--progress-bar-reading-primary),
var(--progress-bar-reading-background),
var(--progress-bar-reading-secondary)
); /* Gradient horizontal animé */
background-size: 200% 100%; /* Taille du gradient pour l'animation */
/* === EFFETS VISUELS === */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Ombre portée subtile */
border-radius: var(--progress-bar-reading-border-radius); /* Bordures arrondies */
/* === COUCHES ET VISIBILITÉ === */
z-index: var(--progress-bar-reading-z-index); /* Position dans l'empilement */
opacity: var(--progress-bar-reading-opacity); /* Opacité configurable */
/* === ANIMATIONS === */
transition:
width var(--progress-bar-reading-transition-speed) cubic-bezier(0.22, 1, 0.36, 1),
height 0.3s ease,
opacity 0.3s ease; /* Transitions fluides */
animation: gradient-shift-Emile-SNYERS var(--progress-bar-reading-gradient-speed) ease infinite;
}
/*
* Effet de survol pour améliorer l'interactivité
* Agrandit légèrement la barre pour une meilleure visibilité
*/
.progress-bar-reading-page-Emile-SNYERS:hover {
height: var(--progress-bar-reading-height-hover); /* Hauteur agrandie au survol */
opacity: var(--progress-bar-reading-opacity-hover); /* Opacité au survol */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée */
}
/* ====================================================================
ANIMATIONS DE LA BARRE DE PROGRESSION
==================================================================== */
/*
* Animation du gradient de couleur
* Crée un effet de mouvement dans la barre de progression
*/
@keyframes gradient-shift-Emile-SNYERS {
0% {
background-position: 0% 50%; /* Position initiale du gradient */
}
50% {
background-position: 100% 50%; /* Position centrale du gradient */
}
100% {
background-position: 0% 50%; /* Retour à la position initiale */
}
}
/*
* Animation de brillance (effet de lumière qui traverse la barre)
* Ajoute un effet visuel premium à la barre de progression
*/
@keyframes shine-effect-Emile-SNYERS {
0% {
transform: translateX(-100%); /* Départ hors de la barre (gauche) */
opacity: 0; /* Invisible au départ */
}
50% {
opacity: 1; /* Visible au centre */
}
100% {
transform: translateX(100%); /* Sortie hors de la barre (droite) */
opacity: 0; /* Invisible à la fin */
}
}
/*
* Animation de pulsation pour attirer l'attention
* Utilisée lors d'événements spéciaux (fin de lecture, etc.)
*/
@keyframes pulse-reading-Emile-SNYERS {
0%, 100% {
transform: scaleY(1); /* Taille normale */
opacity: 1; /* Opacité normale */
}
50% {
transform: scaleY(1.2); /* Agrandissement vertical */
opacity: 0.8; /* Légère transparence */
}
}
/* ====================================================================
EFFET DE BRILLANCE (SHINE EFFECT)
==================================================================== */
/*
* Pseudo-élément pour l'effet de brillance
* Crée une bande lumineuse qui traverse la barre périodiquement
*/
.progress-bar-reading-page-Emile-SNYERS::after {
content: ''; /* Contenu vide pour le pseudo-élément */
position: absolute; /* Position absolue dans la barre */
top: 0; /* Alignement en haut */
right: 0; /* Alignement à droite */
/* === DIMENSIONS === */
width: 100px; /* Largeur de l'effet brillance */
height: 100%; /* Hauteur égale à la barre */
/* === APPARENCE === */
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
); /* Gradient transparent vers blanc */
/* === ANIMATION === */
animation: shine-effect-Emile-SNYERS var(--progress-bar-reading-shine-speed) linear infinite;
/* === PERFORMANCE === */
pointer-events: none; /* N'interfère pas avec les clics */
}
/* ====================================================================
VARIANTES DE STYLES THÉMATIQUES
==================================================================== */
/*
* THÈME MINIMAL - Version discrète et élégante
* Pour les sites avec un design épuré
*/
.progress-bar-reading-page-Emile-SNYERS.theme-minimal {
height: 3px; /* Barre plus fine */
background: var(--progress-bar-reading-primary); /* Couleur unie */
box-shadow: none; /* Suppression de l'ombre */
border-radius: 0; /* Suppression des bordures arrondies */
animation: none; /* Suppression des animations */
}
/* Suppression de l'effet brillance pour le thème minimal */
.progress-bar-reading-page-Emile-SNYERS.theme-minimal::after {
display: none; /* Masquage de l'effet brillance */
}
/*
* THÈME PREMIUM - Version avec effets visuels avancés
* Pour les sites nécessitant un effet "wow"
*/
.progress-bar-reading-page-Emile-SNYERS.theme-premium {
height: 8px; /* Barre plus épaisse */
background: linear-gradient(
45deg,
var(--progress-bar-reading-primary),
var(--progress-bar-reading-accent),
var(--progress-bar-reading-secondary)
); /* Gradient diagonal */
background-size: 300% 100%; /* Gradient plus étendu */
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.2),
0 0 20px rgba(52, 152, 219, 0.3); /* Ombre + lueur */
border-radius: 0 0 8px 0; /* Bordure plus arrondie */
}
/* Effet brillance renforcé pour le thème premium */
.progress-bar-reading-page-Emile-SNYERS.theme-premium::after {
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent
); /* Brillance plus intense */
animation-duration: 1.5s; /* Animation plus rapide */
}
/*
* THÈME ÉDUCATIF - Spécialement conçu pour les sites éducatifs
* Couleurs et animations adaptées au contenu pédagogique
*/
.progress-bar-reading-page-Emile-SNYERS.theme-educational {
height: 6px; /* Hauteur équilibrée */
background: linear-gradient(
90deg,
#3498db, /* Bleu éducatif */
#2ecc71, /* Vert progression */
#f39c12 /* Orange accomplissement */
); /* Gradient éducatif */
border-radius: 0 0 6px 0; /* Bordure douce */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Ombre subtile */
}
/* ====================================================================
INDICATEURS DE PROGRESSION AVANCÉS
==================================================================== */
/*
* Conteneur pour les indicateurs de progression
* Affiche des informations supplémentaires (pourcentage, temps estimé)
*/
.progress-indicators-Emile-SNYERS {
position: fixed; /* Position fixe */
top: var(--progress-bar-reading-height); /* Juste en dessous de la barre */
right: 20px; /* Alignement à droite */
background: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
color: white; /* Texte blanc */
padding: 5px 10px; /* Espacement interne */
border-radius: 0 0 6px 6px; /* Bordures arrondies */
font-size: 12px; /* Taille de police réduite */
font-family: 'Courier New', monospace; /* Police à chasse fixe */
z-index: calc(var(--progress-bar-reading-z-index) + 1); /* Au-dessus de la barre */
opacity: 0; /* Invisible par défaut */
transition: opacity 0.3s ease; /* Transition d'apparition */
pointer-events: none; /* N'interfère pas avec les clics */
}
/* Affichage des indicateurs au survol de la barre */
.progress-bar-reading-page-Emile-SNYERS:hover + .progress-indicators-Emile-SNYERS {
opacity: 1; /* Visible au survol */
}
/*
* Pourcentage de progression
* Affiche le pourcentage exact de lecture
*/
.progress-percentage-Emile-SNYERS::before {
content: attr(data-percentage) '%'; /* Affichage du pourcentage */
font-weight: bold; /* Texte en gras */
}
/*
* Temps de lecture estimé
* Calcule et affiche le temps restant estimé
*/
.progress-time-remaining-Emile-SNYERS::before {
content: 'Temps restant: ' attr(data-time-remaining); /* Affichage du temps */
font-style: italic; /* Texte en italique */
}
/* ====================================================================
POINTS DE REPÈRE DE LECTURE
==================================================================== */
/*
* Marqueurs de progression à des points spécifiques
* Indiquent des sections importantes du contenu
*/
.progress-markers-Emile-SNYERS {
position: fixed; /* Position fixe */
top: 0; /* Alignement en haut */
left: 0; /* Alignement à gauche */
width: 100%; /* Largeur complète */
height: var(--progress-bar-reading-height); /* Même hauteur que la barre */
z-index: calc(var(--progress-bar-reading-z-index) - 1); /* En dessous de la barre */
pointer-events: none; /* N'interfère pas avec les clics */
}
/*
* Marqueur individuel (ex: 25%, 50%, 75% de la page)
* Positionnés automatiquement selon le contenu
*/
.progress-marker-Emile-SNYERS {
position: absolute; /* Position absolue dans le conteneur */
top: 0; /* Alignement en haut */
width: 2px; /* Largeur fine */
height: 100%; /* Hauteur complète */
background: rgba(255, 255, 255, 0.6); /* Couleur semi-transparente */
border-radius: 1px; /* Bordures arrondies */
}
/* Marqueurs de quart de progression */
.progress-marker-Emile-SNYERS.quarter-1 { left: 25%; } /* Premier quart */
.progress-marker-Emile-SNYERS.quarter-2 { left: 50%; } /* Moitié */
.progress-marker-Emile-SNYERS.quarter-3 { left: 75%; } /* Trois quarts */
/* ====================================================================
ANIMATIONS SPÉCIALES POUR ÉVÉNEMENTS
==================================================================== */
/*
* Animation de completion (fin de lecture)
* Déclenchée quand l'utilisateur atteint 100% de la page
*/
.progress-bar-reading-page-Emile-SNYERS.completed {
animation:
pulse-reading-Emile-SNYERS 0.6s ease-in-out 3, /* Pulsation 3 fois */
gradient-shift-Emile-SNYERS 1s ease infinite; /* Gradient accéléré */
background: linear-gradient(
90deg,
#2ecc71, /* Vert de réussite */
#27ae60, /* Vert plus foncé */
#2ecc71 /* Retour au vert clair */
); /* Couleurs de succès */
}
/*
* Animation de milestone (jalon atteint)
* Déclenchée aux points importants (25%, 50%, 75%)
*/
.progress-bar-reading-page-Emile-SNYERS.milestone {
animation: pulse-reading-Emile-SNYERS 0.4s ease-in-out 1; /* Une pulsation */
}
/* ====================================================================
ACCESSIBILITÉ ET PRÉFÉRENCES UTILISATEUR
==================================================================== */
/*
* Respect des préférences de mouvement réduit
* Désactive les animations pour les utilisateurs sensibles au mouvement
*/
@media (prefers-reduced-motion: reduce) {
/* Suppression de toutes les animations */
.progress-bar-reading-page-Emile-SNYERS,
.progress-bar-reading-page-Emile-SNYERS::after {
animation: none !important; /* Suppression des animations */
transition: width 0.1s ease !important; /* Transition réduite */
}
/* Suppression des effets de survol animés */
.progress-bar-reading-page-Emile-SNYERS:hover {
transition: none; /* Pas de transition au survol */
}
}
/*
* Support pour le mode sombre automatique
* Adapte les couleurs selon les préférences système
*/
@media (prefers-color-scheme: dark) {
:root {
--progress-bar-reading-primary: #5dade2; /* Bleu plus clair pour le sombre */
--progress-bar-reading-secondary: #2c3e50; /* Gris foncé */
--progress-bar-reading-background: #34495e; /* Fond sombre */
}
/* Indicateurs adaptés au mode sombre */
.progress-indicators-Emile-SNYERS {
background: rgba(255, 255, 255, 0.9); /* Fond clair */
color: #2c3e50; /* Texte sombre */
}
}
/* ====================================================================
RESPONSIVE DESIGN POUR DIFFÉRENTS ÉCRANS
==================================================================== */
/*
* Adaptation pour tablettes
* Ajustements pour les écrans moyens
*/
@media (max-width: 1024px) {
.progress-bar-reading-page-Emile-SNYERS {
height: calc(var(--progress-bar-reading-height) * 1.2); /* Légèrement plus épaisse */
}
.progress-indicators-Emile-SNYERS {
font-size: 14px; /* Police légèrement plus grande */
padding: 6px 12px; /* Espacement augmenté */
}
}
/*
* Adaptation pour mobiles
* Optimisations pour petits écrans tactiles
*/
@media (max-width: 768px) {
.progress-bar-reading-page-Emile-SNYERS {
height: calc(var(--progress-bar-reading-height) * 1.5); /* Plus épaisse pour le tactile */
}
/* Suppression des effets de survol sur mobile */
.progress-bar-reading-page-Emile-SNYERS:hover {
height: var(--progress-bar-reading-height); /* Pas d'agrandissement */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Ombre normale */
}
/* Indicateurs repositionnés pour mobile */
.progress-indicators-Emile-SNYERS {
right: 10px; /* Plus proche du bord */
font-size: 11px; /* Police réduite */
padding: 4px 8px; /* Espacement réduit */
}
/* Marqueurs plus visibles sur mobile */
.progress-marker-Emile-SNYERS {
width: 3px; /* Largeur augmentée */
background: rgba(255, 255, 255, 0.8); /* Plus opaque */
}
}
/* ====================================================================
CLASSES UTILITAIRES POUR LA PERSONNALISATION
==================================================================== */
/*
* Classes pour masquer/afficher des éléments
*/
.progress-bar-reading-hidden-Emile-SNYERS {
opacity: 0 !important; /* Masquage complet */
pointer-events: none !important; /* Désactivation des interactions */
}
.progress-bar-reading-visible-Emile-SNYERS {
opacity: 1 !important; /* Affichage complet */
}
/*
* Classes pour contrôler les animations
*/
.progress-bar-reading-no-animation-Emile-SNYERS {
animation: none !important; /* Suppression des animations */
transition: width 0.1s ease !important; /* Transition minimale */
}
.progress-bar-reading-fast-animation-Emile-SNYERS {
animation-duration: 1s !important; /* Animation accélérée */
transition-duration: 0.2s !important; /* Transition accélérée */
}
/*
* Classes pour la hauteur personnalisée
*/
.progress-bar-reading-thin-Emile-SNYERS {
height: 3px !important; /* Barre fine */
}
.progress-bar-reading-thick-Emile-SNYERS {
height: 12px !important; /* Barre épaisse */
}
/* ====================================================================
INFORMATIONS DE DEBUG ET DÉVELOPPEMENT
==================================================================== */
/*
* Classes de debug (à supprimer en production)
* Permettent de visualiser les éléments pendant le développement
*/
.progress-bar-reading-debug-Emile-SNYERS {
outline: 2px solid red !important; /* Contour rouge pour debug */
background: rgba(255, 0, 0, 0.2) !important; /* Fond rouge semi-transparent */
}
/*
* ===============================================================
* FIN DU FICHIER - VERSION 2.0 EMILE SNYERS
* ===============================================================
*
* 📄 Fichier: 6-progress-bar-reading-Emile-SNYERS.css
* 🎯 Fonctionnalité: Barre de progression de lecture avancée
* 📱 Responsive: Mobile-first avec adaptation tous écrans
* ♿ Accessible: Support prefers-reduced-motion et mode sombre
* 🎨 Thématisé: 4 variantes (standard, minimal, premium, éducatif)
* ⚡ Performance: Optimisé GPU avec will-change et transform
* 🔧 Personnalisable: 15+ variables CSS configurables
*
* UTILISATION RECOMMANDÉE:
* HTML:
* JS: Mettre à jour la largeur selon le scroll: element.style.width = percentage + '%'
*
* PROCHAINES AMÉLIORATIONS POSSIBLES:
* - Support RTL (right-to-left)
* - Intégration Web Animations API
* - Mode lecture vocale
* - Synchronisation avec marque-pages
* ===============================================================
*/