Documentation
Documentation - Placeholder.
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
Placeholder
Les placeholders (ou skeletons) sont des indicateurs visuels de chargement qui affichent une structure approximative du contenu pendant son chargement. Ils améliorent l'expérience utilisateur en donnant une indication visuelle de ce qui va apparaître, réduisant ainsi la perception du temps d'attente. Marssel permet de créer facilement des placeholders animés pour différents types de contenu.
Placeholder de texte
<div class="placeholder-line---[h-[15px]+bg-[e0e0e0]+rounded-[4px]+mb-[8px]+w-[100%]]"></div>
<div class="placeholder-text">
<div class="h-[15px] bg-[e0e0e0] rounded-[4px] mb-[8px] w-[100%]"></div>
<div class="h-[15px] bg-[e0e0e0] rounded-[4px] mb-[8px] w-[90%]"></div>
<div class="h-[15px] bg-[e0e0e0] rounded-[4px] mb-[8px] w-[85%]"></div>
<div class="h-[15px] bg-[e0e0e0] rounded-[4px] w-[60%]"></div>
</div>Placeholder de paragraphe
<div class="placeholder-paragraph">
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] mb-[8px] w-[100%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] mb-[8px] w-[95%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] mb-[8px] w-[98%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] mb-[16px] w-[70%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] mb-[8px] w-[100%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] mb-[8px] w-[88%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[75%]"></div>
</div>Placeholder d'image
<!-- Image 16:9 -->
<div class="placeholder-image---[pos-[relative]+pt-[56.25%]+bg-[e0e0e0]+rounded-[8px]+mb-[16px]]">
<div class="pos-[absolute] top-[0] left-[0] w-[100%] h-[100%]">
</div>
</div>
<!-- Image carrée -->
<div class="placeholder-image2---[pos-[relative]+pt-[100%]+bg-[e0e0e0]+rounded-[8px]+mb-[16px]]">
<div class="pos-[absolute] top-[0] left-[0] w-[100%] h-[100%]"></div>
</div>
<!-- Image 4:3 -->
<div class="placeholder-image3---[pos-[relative]+pt-[75%]+bg-[e0e0e0]+rounded-[8px]]">
<div class="pos-[absolute] top-[0] left-[0] w-[100%] h-[100%]"></div>
</div>Placeholder de card
<div class="placeholder-card---[bg-[fff]+p-[20px]+rounded-[12px]+shadow-[0_2px_8px_rgba(0,0,0,0.1)]]">
<!-- Image -->
<div class="h-[200px] bg-[f0f0f0] rounded-[8px] mb-[16px]"></div>
<!-- Titre -->
<div class="h-[20px] bg-[e0e0e0] rounded-[4px] mb-[12px] w-[70%]"></div>
<!-- Description -->
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] mb-[6px] w-[100%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] mb-[6px] w-[95%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] mb-[16px] w-[80%]"></div>
<!-- Bouton -->
<div class="h-[40px] bg-[e0e0e0] rounded-[6px] w-[120px]"></div>
</div>Placeholder avec avatar
<div class="placeholder-profile---[d-[flex]+gap-[16px]+p-[16px]+bg-[f8f8f8]+rounded-[8px]]">
<!-- Avatar circulaire -->
<div class="placeholder-avatar---[w-[60px]+h-[60px]+rounded-[50%]+bg-[e0e0e0]+flex-shrink-[0]]"></div>
<!-- Informations -->
<div class="flex-[1]">
<div class="h-[16px] bg-[e0e0e0] rounded-[4px] mb-[8px] w-[150px]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] mb-[6px] w-[200px]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[100px]"></div>
</div>
</div>Placeholder de liste
<div class="placeholder-list">
<!-- Item 1 -->
<div class="d-[flex] gap-[12px] mb-[16px] p-[12px] bg-[f8f8f8] rounded-[8px]">
<div class="w-[40px] h-[40px] rounded-[50%] bg-[e0e0e0]"></div>
<div class="flex-[1]">
<div class="h-[14px] bg-[e0e0e0] rounded-[4px] mb-[6px] w-[60%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[40%]"></div>
</div>
</div>
<!-- Item 2 -->
<div class="d-[flex] gap-[12px] mb-[16px] p-[12px] bg-[f8f8f8] rounded-[8px]">
<div class="w-[40px] h-[40px] rounded-[50%] bg-[e0e0e0]"></div>
<div class="flex-[1]">
<div class="h-[14px] bg-[e0e0e0] rounded-[4px] mb-[6px] w-[70%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[35%]"></div>
</div>
</div>
<!-- Item 3 -->
<div class="d-[flex] gap-[12px] p-[12px] bg-[f8f8f8] rounded-[8px]">
<div class="w-[40px] h-[40px] rounded-[50%] bg-[e0e0e0]"></div>
<div class="flex-[1]">
<div class="h-[14px] bg-[e0e0e0] rounded-[4px] mb-[6px] w-[55%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[45%]"></div>
</div>
</div>
</div>Placeholder animé (shimmer)
<style>
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.placeholder-shimmer {
position: relative;
overflow: hidden;
}
.placeholder-shimmer::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.6) 50%,
transparent 100%
);
animation: shimmer 1.5s infinite;
}
</style>
<!-- Container avec animation -->
<div class="placeholder-shimmer pos-[relative] overflow-[hidden]">
<!-- Contenu placeholder -->
<div class="h-[15px] bg-[e0e0e0] rounded-[4px] mb-[8px] w-[100%]"></div>
<div class="h-[15px] bg-[e0e0e0] rounded-[4px] mb-[8px] w-[90%]"></div>
<div class="h-[15px] bg-[e0e0e0] rounded-[4px] w-[70%]"></div>
</div>Placeholder responsive
<div class="placeholder-container pos-[relative] overflow-[hidden]">
<div class="h-[15px] md--h-[20px] bg-[e0e0e0] rounded-[4px] mb-[12px] w-[100%] md--w-[80%]"></div>
<div class="h-[12px] md--h-[14px] bg-[f0f0f0] rounded-[4px] mb-[8px] w-[100%]"></div>
<div class="h-[12px] md--h-[14px] bg-[f0f0f0] rounded-[4px] mb-[8px] w-[90%] md--w-[70%]"></div>
<div class="h-[12px] md--h-[14px] bg-[f0f0f0] rounded-[4px] w-[80%] md--w-[60%]"></div>
</div>Placeholder de grille
<div class="placeholder-grid---[d-[grid]+grid-cols-[1]+md--grid-cols-[2]+lg--grid-cols-[3]+gap-[20px]]">
<!-- Card 1 -->
<div class="placeholder-card---[bg-[fff]+rounded-[12px]+shadow-[0_2px_8px_rgba(0,0,0,0.1)]+overflow-[hidden]]">
<div class="h-[200px] bg-[e0e0e0]"></div>
<div class="p-[16px]">
<div class="h-[16px] bg-[e0e0e0] rounded-[4px] mb-[12px] w-[70%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] mb-[6px] w-[100%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[85%]"></div>
</div>
</div>
<!-- Card 2 -->
<div class="placeholder-card---[bg-[fff]+rounded-[12px]+shadow-[0_2px_8px_rgba(0,0,0,0.1)]+overflow-[hidden]]">
<div class="h-[200px] bg-[e0e0e0]"></div>
<div class="p-[16px]">
<div class="h-[16px] bg-[e0e0e0] rounded-[4px] mb-[12px] w-[65%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] mb-[6px] w-[100%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[90%]"></div>
</div>
</div>
<!-- Card 3 -->
<div class="placeholder-card---[bg-[fff]+rounded-[12px]+shadow-[0_2px_8px_rgba(0,0,0,0.1)]+overflow-[hidden]]">
<div class="h-[200px] bg-[e0e0e0]"></div>
<div class="p-[16px]">
<div class="h-[16px] bg-[e0e0e0] rounded-[4px] mb-[12px] w-[75%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] mb-[6px] w-[100%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[80%]"></div>
</div>
</div>
</div>Placeholder de tableau
<div class="placeholder-table---[bg-[fff]+rounded-[8px]+overflow-[hidden]+border-[1px_solid_e0e0e0]]">
<!-- Header -->
<div class="d-[flex] gap-[16px] p-[16px] bg-[f8f8f8] border-b-[1px_solid_e0e0e0]">
<div class="h-[14px] bg-[e0e0e0] rounded-[4px] w-[30%]"></div>
<div class="h-[14px] bg-[e0e0e0] rounded-[4px] w-[25%]"></div>
<div class="h-[14px] bg-[e0e0e0] rounded-[4px] w-[20%]"></div>
<div class="h-[14px] bg-[e0e0e0] rounded-[4px] w-[25%]"></div>
</div>
<!-- Row 1 -->
<div class="d-[flex] gap-[16px] p-[16px] border-b-[1px_solid_f0f0f0]">
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[30%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[25%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[20%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[25%]"></div>
</div>
<!-- Row 2 -->
<div class="d-[flex] gap-[16px] p-[16px] border-b-[1px_solid_f0f0f0]">
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[30%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[25%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[20%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[25%]"></div>
</div>
<!-- Row 3 -->
<div class="d-[flex] gap-[16px] p-[16px]">
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[30%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[25%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[20%]"></div>
<div class="h-[12px] bg-[f0f0f0] rounded-[4px] w-[25%]"></div>
</div>
</div>