Documentation
Documentation - Progress Bar.
Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.
Démarrage
Concepts de base
Utilitaires
Progress Bar
Les barres de progression de Marssel permettent d'afficher visuellement l'avancement d'une tâche ou d'un processus. Elles sont entièrement personnalisables via des propriétés CSS personnalisées et supportent différents styles : simples, avec texte, animées, ou avec dégradés. Utilisez les classes progress-container et progress-bar pour créer des indicateurs de progression élégants et accessibles.
Barre de progression basique
<div class="progress-container---[w-[100%]+h-[20px]+bg-[red]+rounded-[20px]+overflow-[hidden]+pos-[relative]]">
<div class="progress-bar---[h-[100%]+bg-[4285f4]+rounded-[20px]+transition-[width_0.5s_ease]+w-[65%]+pos-[relative]]"
role="progressbar"
aria-valuenow="65"
aria-valuemin="0"
aria-valuemax="100"
>
</div>
</div>Avec texte d'indication
<!-- Progression avec pourcentage -->
<div class="progress-container2---[w-[100%]+h-[24px]+bg-[f0f0f0]+rounded-[12px]+overflow-[hidden]+pos-[relative]]">
<div class="progress-bar2---[h-[100%]+bg-[10b981]+w-[75%]+pos-[relative]]"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100">
<span class="progress-text2---[pos-[absolute]+right-[10px]+top-[50%]+transform-[translateY(-50%)]+font-size-[12px]+c-[white]]">
75%
</span>
</div>
</div>Différentes tailles
<!-- Petite -->
<div class="progress-container-small---[w-[100%]+h-[8px]+bg-[e5e7eb]+rounded-[4px]+overflow-[hidden]]">
<div class="progress-bar-small---[h-[100%]+bg-[0B63F3]+w-[40%]]"></div>
</div>
<!-- Moyenne (par défaut) -->
<div class="progress-container-default---[w-[100%]+h-[20px]+bg-[e5e7eb]+rounded-[10px]+overflow-[hidden]+mt-[10px]]">
<div class="progress-bar-default---[h-[100%]+bg-[0B63F3]+w-[60%]]"></div>
</div>
<!-- Grande -->
<div class="progress-container-large---[w-[100%]+h-[32px]+bg-[e5e7eb]+rounded-[16px]+overflow-[hidden]+mt-[10px]]">
<div class="progress-bar-large---[h-[100%]+bg-[0B63F3]+w-[80%]]"></div>
</div>Couleurs et variations
<!-- Succès (vert) -->
<div class="progress-container-success---[w-[100%]+h-[20px]+bg-[e0e0e0]+rounded-[10px]+overflow-[hidden]+mb-[10px]]">
<div class="progress-bar-success---[h-[100%]+bg-[10b981]+w-[100%]]"></div>
</div>
<!-- Avertissement (orange) -->
<div class="progress-container-warning---[w-[100%]+h-[20px]+bg-[e0e0e0]+rounded-[10px]+overflow-[hidden]+mb-[10px]]">
<div class="progress-bar-warning---[h-[100%]+bg-[f59e0b]+w-[45%]]"></div>
</div>
<!-- Danger (rouge) -->
<div class="progress-container-danger---[w-[100%]+h-[20px]+bg-[e0e0e0]+rounded-[10px]+overflow-[hidden]+mb-[10px]]">
<div class="progress-bar-danger---[h-[100%]+bg-[D41212]+w-[25%]]"></div>
</div>
<!-- Info (bleu) -->
<div class="progress-container-info---[w-[100%]+h-[20px]+bg-[e0e0e0]+rounded-[10px]+overflow-[hidden]]">
<div class="progress-bar-info---[h-[100%]+bg-[0B63F3]+w-[70%]]"></div>
</div>Avec dégradés
<!-- Dégradé linéaire simple -->
<div class="progress-container-dls---[w-[100%]+h-[24px]+bg-[e5e7eb]+rounded-[12px]+overflow-[hidden]]">
<div class="progress-bar-dls---[h-[100%]+w-[65%]]
bg-linear-[90deg,6366f1_0%,8b5cf6_100%]"
role="progressbar"
aria-valuenow="65"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<!-- Dégradé multicolore -->
<div class="progress-container-dm---[w-[100%]+h-[24px]+bg-[e5e7eb]+rounded-[12px]+overflow-[hidden]+mt-[15px]]">
<div class="progress-bar-dm---[h-[100%]+w-[80%]]
bg-linear-[90deg,ff1000_0%,rgba(9,9,121,1)_35%,00e4ff_100%]">
</div>
</div>Barres animées
<!-- Animation de progression -->
<div class="progress-container-a1---[w-[100%]+h-[24px]+bg-[e5e7eb]+rounded-[12px]+overflow-[hidden]]">
<div class="progress-bar-a1---[h-[100%]+bg-[4285f4]+w-[50%]+transition-[width_0.5s_ease]]"
role="progressbar"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<!-- Bandes animées (stripes) -->
<div class="progress-container-a2---[w-[100%]+h-[24px]+bg-[darkred]+rounded-[12px]+overflow-[hidden]+mt-[15px]]">
<div class="progress-bar-a2---[h-[100%]+w-[70%]+pos-[relative]]
bg-linear-[45deg,rgba(255,255,255,0.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.15)_50%,rgba(255,255,255,0.15)_75%,transparent_75%,transparent]
animation-[stripes_1s_linear_infinite]"
role="progressbar"
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100"
>
<span class="progress-text-a2---[pos-[absolute]+left-[10px]+top-[50%]+transform-[translateY(-50%)]+font-size-[12px]+c-[white]]">
Chargement...
</span>
</div>
</div>Styles avancés
Progression
60%
<!-- Avec ombre et relief -->
<div class="progress-container-or---[w-[100%]+h-[28px]+bg-[e5e7eb]+rounded-[14px]+overflow-[hidden]+shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]]">
<div class="progress-bar-or---[h-[100%]+bg-[8b5cf6]+w-[85%]+shadow-[0_2px_8px_rgba(139,92,246,0.4)]]"></div>
</div>
<!-- Progress bar multiple (stacked) -->
<div class="progress-container-bm---[w-[100%]+h-[24px]+bg-[e5e7eb]+rounded-[12px]+overflow-[hidden]+d-[flex]]">
<div class="progress-bar-bm1---[h-[100%]+bg-[10b981]+w-[30%]]"></div>
<div class="progress-bar-bm2---[h-[100%]+bg-[0B63F3]+w-[20%]]"></div>
<div class="progress-bar-bm3---[h-[100%]+bg-[f59e0b]+w-[25%]]"></div>
</div>
<!-- Avec label externe -->
<div class="mb-[8px] d-[flex] justify-[space-between]">
<span class="font-weight-[600]">Progression</span>
<span class="c-[6b7280]">60%</span>
</div>
<div class="progress-container-label---[w-[100%]+h-[20px]+bg-[e5e7eb]+rounded-[10px]+overflow-[hidden]]">
<div class="progress-bar-label---[h-[100%]+bg-[0B63F3]+w-[60%]+transition-[width_0.3s_ease]]"></div>
</div>
<!-- Responsive -->
<div class="progress-container-responsive---[w-[100%]+h-[16px]+md--h-[24px]+lg--h-[32px]+bg-[e5e7eb]+rounded-[8px] md--progress-container-responsive---[rounded-[12px]] lg--progress-container-responsive---[rounded-[16px]+overflow-[hidden]]">
<div class="progress-bar-responsive---[h-[100%]+bg-[0B63F3]+w-[55%]]"></div>
</div>Exemples pratiques
document.pdf
3.2 MB / 5 MB
JavaScript
Expert
<!-- Upload de fichier -->
<div class="upload-progress">
<div class="mb-[12px] d-[flex] justify-[space-between] items-[center]">
<span class="font-size-[14px] font-weight-[500]">document.pdf</span>
<span class="font-size-[13px] c-[6b7280]">3.2 MB / 5 MB</span>
</div>
<div class="progress-container-upload---[w-[100%]+h-[8px]+bg-[e5e7eb]+rounded-[4px]+overflow-[hidden]]">
<div class="progress-bar-upload---[h-[100%]+bg-[10b981]+w-[64%]+transition-[width_0.2s_ease]]"></div>
</div>
</div>
<!-- Niveau de compétence -->
<div class="skill-progress mb-[20px]">
<div class="mb-[8px] d-[flex] justify-[space-between]">
<span class="font-weight-[600]">JavaScript</span>
<span class="font-size-[14px] c-[0B63F3]">Expert</span>
</div>
<div class="progress-container-skill---[w-[100%]+h-[12px]+bg-[e5e7eb]+rounded-[6px]+overflow-[hidden]]">
<div class="progress-bar-skill---[h-[100%]+w-[90%]]
bg-linear-[90deg,0B63F3_0%,8b5cf6_100%]"></div>
</div>
</div>
<!-- Chargement de page -->
<div class="progress-container-load---[w-[100%]+h-[4px]+bg-[transparent]+overflow-[hidden]+pos-[fixed]+top-[0]+left-[0]+z-[9999]]">
<div class="progress-bar-load---[h-[100%]+w-[45%]]
bg-linear-[90deg,0B63F3_0%,8b5cf6_50%,0B63F3_100%]
bg-size-[200%_100%]
animate-[loading_2s_ease-in-out_infinite]"></div>
</div>Accessibilité
Toujours inclure les attributs ARIA pour une meilleure accessibilité :
<div class="progress-bar---[...]"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Progression du téléchargement">
</div>JavaScript (mise à jour dynamique)
// Mettre à jour la progression
function updateProgress(value) {
const progressBar = document.querySelector('.progress-bar');
progressBar.style.width = value + '%';
progressBar.setAttribute('aria-valuenow', value);
const progressText = progressBar.querySelector('.progress-text');
if (progressText) {
progressText.textContent = value + '%';
}
}
// Exemple d'utilisation
updateProgress(65);