Interactive Learning Progress Tracker UI

How to Build an Interactive Progress Tracker with HTML, CSS, and JavaScript

🔥 Read with Full Features on Our Website

In this tutorial, I'll walk you through creating a beautiful, responsive progress tracker that updates as users complete lessons. This UI component is perfect for online courses, learning platforms, or any application where you need to track completion progress.

What We're Building

We'll create a progress tracker with:

A dynamic progress bar with percentage
A list of lessons that can be marked complete/incomplete
Smooth animations and transitions
Fully responsive design

Google Advertisement

Here's the final result: [Insert screenshot or GIF of the working component]

Step 1: Set Up the HTML Structure

First, let's create the basic HTML structure. We'll use Tailwind CSS for styling, which we'll include from a CDN.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Tracker</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-3xl mx-auto">
        <!-- Progress Card and Lessons will go here -->
    </div>
</body>
</html>

Step 2: Create the Progress Card

Inside the main container, we'll add the progress card that shows the overall completion status.

<div class="text-center mb-10">
    <h1 class="text-3xl font-bold text-indigo-700 mb-2">Your Learning Journey</h1>
    <p class="text-gray-600">Track your progress as you complete each lesson</p>
</div>

<!-- Progress Card -->
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 transition-all duration-300 hover:shadow-lg">
    <div class="p-6 sm:p-8">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold text-gray-800">Course Progress</h2>
            <span class="text-indigo-600 font-medium" id="progress-percentage">0%</span>
        </div>
        
        <!-- Progress Bar -->
        <div class="w-full bg-gray-200 rounded-full h-4 mb-6">
            <div id="progress-bar" class="h-4 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600" style="width: 0%"></div>
        </div>
        
        <div class="flex justify-between text-sm text-gray-500">
            <span>0 lessons completed</span>
            <span id="total-lessons">5 lessons total</span>
        </div>
    </div>
</div>

Step 3: Add the Lessons List

Below the progress card, we'll add the list of lessons that users can mark as complete.

<div class="space-y-4">
    <h3 class="text-lg font-medium text-gray-800 mb-2">Lessons</h3>
    
    <!-- Lesson 1 -->
    <div class="lesson-item bg-white rounded-lg shadow-sm p-5 border border-gray-100 cursor-pointer" data-completed="false">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <div class="checkmark w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center">
                    <i class="fas fa-check text-white text-xs"></i>
                </div>
                <div>
                    <h4 class="font-medium text-gray-800">Introduction to HTML</h4>
                    <p class="text-sm text-gray-500">Learn the basics of HTML structure</p>
                </div>
            </div>
            <span class="text-sm text-gray-400">15 min</span>
        </div>
    </div>
    
    <!-- Add more lessons following the same pattern -->
</div>

Step 4: Add Custom CSS for Animations

While Tailwind handles most styling, we'll add some custom CSS for smooth transitions.

<style>
    .progress-bar {
        transition: width 0.5s ease-in-out;
    }
    .checkmark {
        transition: all 0.3s ease;
    }
    .lesson-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
</style>

Step 5: Implement the JavaScript Functionality

Google Advertisement

Now let's add the JavaScript that makes our progress tracker interactive.

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const lessonItems = document.querySelectorAll('.lesson-item');
        const progressBar = document.getElementById('progress-bar');
        const progressPercentage = document.getElementById('progress-percentage');
        const totalLessons = lessonItems.length;
        document.getElementById('total-lessons').textContent = `${totalLessons} lessons total`;
        
        let completedCount = 0;
        
        lessonItems.forEach(item => {
            item.addEventListener('click', function() {
                const isCompleted = this.getAttribute('data-completed') === 'true';
                
                if (isCompleted) {
                    // Mark as incomplete
                    this.setAttribute('data-completed', 'false');
                    this.querySelector('.checkmark').classList.remove('bg-indigo-600', 'border-indigo-600');
                    this.querySelector('.checkmark').classList.add('border-gray-300');
                    completedCount--;
                } else {
                    // Mark as completed
                    this.setAttribute('data-completed', 'true');
                    this.querySelector('.checkmark').classList.add('bg-indigo-600', 'border-indigo-600');
                    this.querySelector('.checkmark').classList.remove('border-gray-300');
                    completedCount++;
                }
                
                updateProgress();
            });
        });
        
        function updateProgress() {
            const percentage = Math.round((completedCount / totalLessons) * 100);
            progressBar.style.width = `${percentage}%`;
            progressPercentage.textContent = `${percentage}%`;
            
            const completedText = document.querySelector('.flex.justify-between.text-sm.text-gray-500 span:first-child');
            completedText.textContent = `${completedCount} ${completedCount === 1 ? 'lesson' : 'lessons'} completed`;
            
            if (percentage === 100) {
                progressBar.classList.add('animate-pulse');
                setTimeout(() => {
                    progressBar.classList.remove('animate-pulse');
                }, 2000);
            }
        }
    });
</script>

How It Works

Initialization:
- We select all lesson items and progress elements when the DOM loads
- We count the total number of lessons and display it
Click Handling:
- Each lesson item has a click event listener
- Google Advertisement
  
  When clicked, we check if it's already completed
- We toggle the completed state and update the checkmark appearance
Progress Calculation:
- The updateProgress() function calculates the completion percentage
- It updates the progress bar width and percentage display
- It also updates the "X lessons completed" text
Celebration Effect:
- When progress reaches 100%, we add a pulse animation to the progress bar