LMS Progress

Course progress bars and module tracking

SaaSLMS

Overview

The progress domain provides components for tracking learner advancement. ProgressBar renders a visual progress indicator with configurable size, color, and optional percentage label. ModuleProgress shows per-module completion with expandable lesson lists, time spent tracking, and completion timestamps.

Usage

import { ModuleProgress, ProgressBar } from "@leanicon/web-builder-library/saas";

<ProgressBar
  percentage={65}
  showLabel
  size="md"
/>

<ModuleProgress
  module={moduleData}
  isExpanded={isExpanded}
  onToggle={() => setExpanded(!isExpanded)}
  onLessonClick={(lesson) => navigateToLesson(lesson.id)}
/>

Variants

ProgressBar - Default

ProgressBar - With Label

Progress65%

ProgressBar - Zero Percent

Progress0%

ProgressBar - Complete

Progress100%

ProgressBar - All Sizes

Small

Medium

Large

ProgressBar - Colors by Progress

Progress15%
Progress40%
Progress70%
Progress100%

ModuleProgress - Default

Getting Started with React

3 / 5 lessons45m

ModuleProgress - Not Started

Getting Started with React

0 / 5 lessons

ModuleProgress - Completed

Getting Started with React

5 / 5 lessons1hCompleted 1/15/2024

Dark

Progress65%

Getting Started with React

3 / 5 lessons45m

Multiple Modules (code only)

<div className="space-y-3">
  <ModuleProgress
    module={{
      moduleId: "mod-1",
      moduleName: "Getting Started",
      lessonsTotal: 3,
      lessonsCompleted: 3,
      timeSpentMinutes: 30,
      completedAt: "2024-01-10T10:00:00Z",
    }}
  />
  <ModuleProgress
    module={{
      moduleId: "mod-2",
      moduleName: "React Fundamentals",
      lessonsTotal: 5,
      lessonsCompleted: 4,
      timeSpentMinutes: 65,
    }}
  />
  <ModuleProgress
    module={{
      moduleId: "mod-3",
      moduleName: "State Management",
      lessonsTotal: 6,
      lessonsCompleted: 2,
      timeSpentMinutes: 25,
    }}
  />
  <ModuleProgress
    module={{
      moduleId: "mod-4",
      moduleName: "Advanced Patterns",
      lessonsTotal: 4,
      lessonsCompleted: 0,
      timeSpentMinutes: 0,
    }}
  />
</div>