Article Categories

Selected Reading

How to create progress bar using the HTML and CSS

HTML CSS Web Development Front End Technology

The progress bar is a visual element used to show the completion status of a task, file upload, or process. You can create an animated progress bar using HTML for structure and CSS for styling and animation effects.

Syntax

.progress-container {
    /* Container styling */
}

.progress-bar {
    /* Progress bar styling */
    animation: progress-animation duration timing-function;
}

@keyframes progress-animation {
    from { width: 0%; }
    to { width: target-percentage%; }
}

Example: Basic Animated Progress Bar

The following example creates a progress bar that animates from 0% to 80% completion

<!DOCTYPE html>
<html>
<head>
<style>
    .progress-container {
        width: 300px;
        height: 30px;
        background-color: #f0f0f0;
        border-radius: 15px;
        margin: 50px auto;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    .progress-bar {
        height: 100%;
        background: linear-gradient(45deg, #4CAF50, #45a049);
        border-radius: 15px;
        width: 80%;
        animation: fillProgress 3s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
    }
    
    @keyframes fillProgress {
        0% { width: 0%; }
        100% { width: 80%; }
    }
</style>
</head>
<body>
    <div class="progress-container">
        <div class="progress-bar">80% Complete</div>
    </div>
</body>
</html>

A rounded progress bar with a green gradient background animates from 0% to 80% width over 3 seconds, displaying "80% Complete" text in white.

Example: Multiple Progress Bars

This example demonstrates multiple progress bars with different completion percentages

<!DOCTYPE html>
<html>
<head>
<style>
    .skill-set {
        width: 400px;
        margin: 20px auto;
        font-family: Arial, sans-serif;
    }
    
    .skill {
        margin-bottom: 20px;
    }
    
    .skill-name {
        margin-bottom: 5px;
        font-weight: bold;
        color: #333;
    }
    
    .progress-track {
        width: 100%;
        height: 20px;
        background-color: #e0e0e0;
        border-radius: 10px;
        overflow: hidden;
    }
    
    .progress-fill {
        height: 100%;
        border-radius: 10px;
        animation-duration: 2s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
    
    .html-bar {
        background-color: #ff6b35;
        animation: fillHTML 2s ease-out;
    }
    
    .css-bar {
        background-color: #4285f4;
        animation: fillCSS 2s ease-out 0.5s;
        width: 0%;
    }
    
    .js-bar {
        background-color: #f7df1e;
        animation: fillJS 2s ease-out 1s;
        width: 0%;
    }
    
    @keyframes fillHTML {
        from { width: 0%; }
        to { width: 90%; }
    }
    
    @keyframes fillCSS {
        from { width: 0%; }
        to { width: 75%; }
    }
    
    @keyframes fillJS {
        from { width: 0%; }
        to { width: 60%; }
    }
</style>
</head>
<body>
    <div class="skill-set">
        <div class="skill">
            <div class="skill-name">HTML - 90%</div>
            <div class="progress-track">
                <div class="progress-fill html-bar"></div>
            </div>
        </div>
        
        <div class="skill">
            <div class="skill-name">CSS - 75%</div>
            <div class="progress-track">
                <div class="progress-fill css-bar"></div>
            </div>
        </div>
        
        <div class="skill">
            <div class="skill-name">JavaScript - 60%</div>
            <div class="progress-track">
                <div class="progress-fill js-bar"></div>
            </div>
        </div>
    </div>
</body>
</html>

Three skill progress bars animate sequentially: HTML (orange, 90%), CSS (blue, 75%), and JavaScript (yellow, 60%) with staggered animation delays.

Key Animation Properties

Property	Description	Example
`animation-duration`	How long the animation takes	`2s`, `500ms`
`animation-timing-function`	Speed curve of animation	`ease-in-out`, `linear`
`animation-delay`	Delay before animation starts	`1s`, `0.5s`
`animation-fill-mode`	Style before/after animation	`forwards`, `backwards`

Conclusion

Progress bars enhance user experience by providing visual feedback on task completion. While CSS animations create attractive static demonstrations, real-time progress bars require JavaScript to update based on actual data or events.

Aman Gupta

Updated on: 2026-03-15T16:40:25+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next