Styled Profile Completion Progress Card

Encourage users to complete their profiles with this visually engaging and fully stylable progress card.

This progress card is built using div elements to give you maximum control over the progress bar's appearance, ensuring it looks identical across all browsers.

Get Source Code Preview

About this Component

This card uses styled div elements to create a progress bar, offering a solution for designers who need full, cross-browser control over the appearance, including details like the border-radius. To ensure it remains completely accessible, it uses ARIA attributes to describe its role and state to assistive technologies.

Features

Full Cross-Browser Style Control: By using divs instead of the progress element (which is a semantic element for displaying progress bars), the styles for colors, borders, and animations should look exactly the same in all modern browsers.
Accessible with ARIA: Uses role="progressbar" and the relevant aria- attributes (aria-valuenow, aria-valuemin, aria-valuemax) to communicate its status to assistive technologies, making it fully accessible.
Clear Call-to-Action: A distinct footer section tells the user exactly what their next step is and provides a link to complete it.

The `div` vs. `progress` Approach

While HTML provides a semantic progress element, it is notoriously difficult to style consistently. Each browser (Chrome, Firefox, Safari) uses its own set of special CSS pseudo-elements to control the look of the bar, making it very hard to achieve a uniform design. This card template uses div elements to bypass this problem, giving you complete control with standard CSS.

If you prefer to use the semantic progress element, check out the Semantic Progress Card.

Code Breakdown

HTML Structure

The card is a section element. Inside, the progress bar is made of two nested div elements. The outer div acts as the background "track" and includes the important ARIA attributes. The inner div is the colored bar that indicates the current progress.

CSS Styling

The outer container has a light gray background and rounded corners, with overflow: hidden. The inner "fill" element is then given a vibrant background color. Its width is set via an inline style attribute (e.g., style="width: 80%;"). Because of the parent's overflow: hidden, the fill bar appears to grow within the track while conforming to its rounded corners.

Code

Here's the complete code. To dynamically update the progress, you would programmatically change the width percentage in the inline style of the .pcp-progress-bar-fill element and update the aria-valuenow attribute to match.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Optional: a container to center the card on the page for demonstration */
.demo-container-progress {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* === Profile Completion Progress Card Styles === */
.pcp-card {
    --pcp-card-radius: 12px;
    --pcp-card-shadow: 0 4px 10px rgba(0,0,0,0.06);
    --progress-bar-color: #4f46e5; /* Indigo */
    
    background-color: #ffffff;
    border-radius: var(--pcp-card-radius);
    box-shadow: var(--pcp-card-shadow);
    max-width: 400px;
    width: 100%;
    padding: 1.5rem;
}

.pcp-header {
    margin-bottom: 1rem;
}
.pcp-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

/* Status text line (e.g., 75% Complete) */
.pcp-status {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}
.pcp-status-text {
    font-size: 0.875rem;
    color: #6b7280;
}
.pcp-status-percentage {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--progress-bar-color);
}

/* The progress bar */
.pcp-progress-bar-container {
    width: 100%;
    height: 10px;
    background-color: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.pcp-progress-bar-fill {
    height: 100%;
    background-color: var(--progress-bar-color);
    border-radius: 10px;
    transition: width 0.5s ease-in-out;
}

/* Call to action */
.pcp-footer {
    border-top: 1px solid #f3f4f6;
    padding-top: 1.25rem;
}
.pcp-cta-text {
    font-size: 0.95rem;
    color: #374151;
    margin: 0 0 0.75rem;
}
.pcp-cta-text strong {
    font-weight: 600;
}
.pcp-cta-link {
    display: inline-block;
    color: #ffffff;
    background-color: #1f2937;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.pcp-cta-link:hover {
    background-color: #374151;
}

</style>

<div class="demo-container-progress">
    <section class="pcp-card" aria-labelledby="pcp-title">
        <header class="pcp-header">
            <h3 class="pcp-title" id="pcp-title">Profile Completion</h3>
        </header>

<div class="pcp-status">
            <span class="pcp-status-text">4 of 5 steps complete</span>
            <span class="pcp-status-percentage">80%</span>
        </div>

<div class="pcp-progress-bar-container"
             role="progressbar" 
             aria-valuenow="80" 
             aria-valuemin="0" 
             aria-valuemax="100" 
             aria-labelledby="pcp-title">
            <div class="pcp-progress-bar-fill" style="width: 80%;"></div>
        </div>

<footer class="pcp-footer">
            <p class="pcp-cta-text"><strong>Next step:</strong> Add your company logo.</p>
            <a href="#" class="pcp-cta-link">Upload Logo</a>
        </footer>
    </section>
</div>

View Output