FR | EN
Install
Documentation

Documentation - Placeholder.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Startup

Basic concepts

Utilities

Components

Placeholder

Placeholders (or skeletons) are visual loading indicators that display an approximate structure of content as it loads. They improve the user experience by giving a visual indication of what will appear, thereby reducing the perception of waiting time. Marssel makes it easy to create animated placeholders for different types of content.

Text Placeholder

Preview 
<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>

Paragraph Placeholder

Preview 
<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>

Image Placeholder

Preview 
<!-- Picture 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>

<!-- Square image -->
<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>

<!-- Picture 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>

Card placeholder

Preview 
<div class="placeholder-card---[bg-[fff]+p-[20px]+rounded-[12px]+shadow-[0_2px_8px_rgba(0,0,0,0.1)]]">
    <!-- Picture -->
    <div class="h-[200px] bg-[f0f0f0] rounded-[8px] mb-[16px]"></div>

    <!-- Title -->
    <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>

    <!-- Button -->
    <div class="h-[40px] bg-[e0e0e0] rounded-[6px] w-[120px]"></div>
</div>

Placeholder with avatar

Preview 
<div class="placeholder-profile---[d-[flex]+gap-[16px]+p-[16px]+bg-[f8f8f8]+rounded-[8px]]">
    <!-- Circular avatar -->
    <div class="placeholder-avatar---[w-[60px]+h-[60px]+rounded-[50%]+bg-[e0e0e0]+flex-shrink-[0]]"></div>

    <!-- Information -->
    <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>

List Placeholder

Preview 
<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>

Animated placeholder (shimmer)

Preview 
<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 with animation -->
<div class="placeholder-shimmer pos-[relative] overflow-[hidden]">
    <!-- Placeholder content -->
    <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>

Responsive Placeholder

Preview 
<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>

Grid Placeholder

Preview 
<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>

Chalkboard Placeholder

Preview 
<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>
← Previous Progress Bar
Next → Entertainment

Cookie settings

Choose the data you want to share.

🙏 Analytics help us prioritize the right features — data in Switzerland, never resold.

Essentials Required

Necessary for operation (session, security).