webdevpuneet.com

Related Snippets

144 in Dashboards category
1–6 of 60

Interact.js Draggable and Resizable Dashboard Panels with Snapping

Dragula Copy vs Move Lists with Spill Control

SortableJS Shared Groups: Clone from a Palette into a Page Builder

SortableJS Drag Handle with Pinned and Locked Rows

SortableJS Nested Sortable Tree with Keyboard Controls

SortableJS Multi-List Kanban with Persistence and WIP Limit

Course Progress Tracker — Free LMS Sidebar UI Snippet

Course Progress Tracker · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsSVGDashboard UILoading States

Copy & paste

Source Code

<div class="cpt-panel">
  <div class="cpt-head">
    <div>
      <p class="cpt-eyebrow">Advanced CSS Layout</p>
      <h2>Course Progress</h2>
    </div>
    <div class="cpt-ring" id="cptRing">
      <svg viewBox="0 0 80 80"><circle class="cpt-ring-bg" cx="40" cy="40" r="34"/><circle class="cpt-ring-fill" id="cptRingFill" cx="40" cy="40" r="34"/></svg>
      <span class="cpt-ring-label" id="cptRingLabel">0%</span>
    </div>
  </div>
  <div class="cpt-bar-track"><div class="cpt-bar-fill" id="cptBarFill"></div></div>

  <a class="cpt-next" href="#" id="cptNext">
    <span class="cpt-next-tag">Continue where you left off</span>
    <span class="cpt-next-title">Module 4 · Grid Template Areas</span>
    <span class="cpt-next-meta">Lesson 3 of 6 · 12 min remaining</span>
  </a>

  <ul class="cpt-modules" id="cptModules">
    <li class="cpt-mod is-done" data-progress="100">
      <span class="cpt-icon" aria-hidden="true">✓</span>
      <div class="cpt-mod-body"><p class="cpt-mod-title">Flexbox Foundations</p><p class="cpt-mod-sub">6 lessons · completed</p></div>
      <div class="cpt-mod-progress"><svg viewBox="0 0 32 32"><circle class="cpt-mini-bg" cx="16" cy="16" r="13"/><circle class="cpt-mini-fill" cx="16" cy="16" r="13" style="--pct:100"/></svg></div>
    </li>
    <li class="cpt-mod is-done" data-progress="100">
      <span class="cpt-icon" aria-hidden="true">✓</span>
      <div class="cpt-mod-body"><p class="cpt-mod-title">Responsive Breakpoints</p><p class="cpt-mod-sub">5 lessons · completed</p></div>
      <div class="cpt-mod-progress"><svg viewBox="0 0 32 32"><circle class="cpt-mini-bg" cx="16" cy="16" r="13"/><circle class="cpt-mini-fill" cx="16" cy="16" r="13" style="--pct:100"/></svg></div>
    </li>
    <li class="cpt-mod is-current" data-progress="50">
      <span class="cpt-icon" aria-hidden="true">●</span>
      <div class="cpt-mod-body"><p class="cpt-mod-title">Grid Template Areas</p><p class="cpt-mod-sub">3 of 6 lessons</p></div>
      <div class="cpt-mod-progress"><svg viewBox="0 0 32 32"><circle class="cpt-mini-bg" cx="16" cy="16" r="13"/><circle class="cpt-mini-fill" cx="16" cy="16" r="13" style="--pct:50"/></svg></div>
    </li>
    <li class="cpt-mod" data-progress="0">
      <span class="cpt-icon" aria-hidden="true">○</span>
      <div class="cpt-mod-body"><p class="cpt-mod-title">Container Queries</p><p class="cpt-mod-sub">4 lessons</p></div>
      <div class="cpt-mod-progress"><svg viewBox="0 0 32 32"><circle class="cpt-mini-bg" cx="16" cy="16" r="13"/><circle class="cpt-mini-fill" cx="16" cy="16" r="13" style="--pct:0"/></svg></div>
    </li>
    <li class="cpt-mod" data-progress="0">
      <span class="cpt-icon" aria-hidden="true">○</span>
      <div class="cpt-mod-body"><p class="cpt-mod-title">Scroll-driven Animation</p><p class="cpt-mod-sub">5 lessons</p></div>
      <div class="cpt-mod-progress"><svg viewBox="0 0 32 32"><circle class="cpt-mini-bg" cx="16" cy="16" r="13"/><circle class="cpt-mini-fill" cx="16" cy="16" r="13" style="--pct:0"/></svg></div>
    </li>
  </ul>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Averaged completion
Header ring computed from every module's data-progress.
Shared ring math
One --pct custom property drives every mini ring's dashoffset.
Resume card
Highlighted "continue where you left off" next-lesson link.
Scroll-to-current
Resume click scrolls and briefly flashes the active module.
Status modifiers
.is-done and .is-current classes swap icon and colors via CSS.
Animated fill-in
Ring and bar animate to their values on load via requestAnimationFrame.
Self-contained rows
Add a module by copying a row and setting two attributes.
Dark LMS styling
Indigo-to-violet gradient accents on a dark panel background.

About this UI Snippet

Course Progress Tracker — Overall Ring, Module List & Resume Card

Screenshot of the Course Progress Tracker snippet rendered live

The course progress tracker is the panel every online-learning product shows a learner as soon as they log in: how far through the course am I, and what's next? This snippet builds that panel with a header completion ring, a slim overall progress bar, a "continue where you left off" resume card, and a scrollable module list where each row carries its own mini progress ring and a done/current/upcoming status icon.

One data source, two visualizations

Rather than hard-coding the header percentage, the JS reads every module's data-progress attribute, averages them, and drives both the big SVG ring and the slim top bar off that single computed number. This mirrors how a real LMS would compute completion — from the actual state of each module — instead of a value someone forgot to update by hand.

SVG rings for the completion visuals

Both the header ring and each row's mini ring are plain <circle> elements with stroke-dasharray set to their circumference and stroke-dashoffset animated to reveal the filled arc. The mini rings use a CSS custom property, --pct, so the same stroke-dashoffset formula works for every row without repeating the circumference math per element — set --pct on the row's HTML and the ring fills itself.

The resume card as a focal point

The "continue where you left off" card sits between the top progress summary and the module list, styled with a gradient border-glow treatment so it reads as the primary next action rather than another list row. Clicking it scrolls the matching in-progress module into view and briefly highlights it — a pattern useful for deep-linking a learner straight back into an in-progress module.

Status-driven module rows

Each .cpt-mod carries a modifier class — .is-done, .is-current, or neither for upcoming — that swaps the icon glyph and colors via CSS alone, no per-row JS branching needed. Add a module by copying a row, setting its data-progress and the modifier class, and the ring and header math pick it up automatically since the average is computed from live DOM state.

Customizing it

Swap in real module counts, add a locked-state icon for modules gated behind prerequisites, or read progress from an API and set data-progress before this script runs. Pair it with a lesson sidebar nav for full-course navigation, a progress wizard for a linear multi-step flow, or circular progress for the ring pattern on its own.

Step by step

How to Use

  1. 1
    Paste the HTML, CSS, and JSThe panel renders with sample module data already filled in.
  2. 2
    Check the header ringIt animates in showing the averaged completion percentage.
  3. 3
    Review the module listDone, current, and upcoming rows each carry their own mini ring.
  4. 4
    Click "Continue where you left off"The current module row scrolls into view and briefly highlights.
  5. 5
    Edit data-progress valuesChange a module's data-progress attribute in the HTML panel.
  6. 6
    Reload to see the recomputeThe header ring and bar update to match the new average.

Real-world uses

Common Use Cases

Online learning dashboards
Show learners their overall completion in a header ring, averaged from every module's data-progress, plus slim per-module rings for the detail.
Corporate compliance training
Track mandatory course completion across modules, with the continue-where-you-left-off card sending people straight to the next lesson they owe.
Cohort-based programmes
Pair with a lesson sidebar nav so progress and navigation sit together, and the resume click scrolls to and flashes the active module.
Certification prep apps
Reveal which modules remain before an exam, using the quiz result breakdown to show which topics still need revision.
Onboarding curricula
Adapt the ring pattern for new-hire programmes alongside an onboarding checklist widget, with one --pct property driving each ring's offset.
Related: Environment Switcher with Color-Coded Persistent Banner
See the Environment Switcher with Color-Coded Persistent Banner for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The script collects every element with class .cpt-mod, reads its data-progress attribute, sums them, and divides by the module count. That single averaged number then drives both the header SVG ring's stroke-dashoffset and the slim top progress bar's width, so there's one source of truth instead of two numbers that could drift apart.

Each row's mini ring circle has a CSS custom property --pct set inline (e.g. style="--pct:50"), and the CSS computes stroke-dashoffset as the circumference minus circumference times --pct over 100. Because the formula lives once in the CSS and only --pct changes per row, adding a new module row just means copying markup and setting one property.

Add a .is-locked modifier alongside the existing .is-done/.is-current pattern, dim the row with reduced opacity and pointer-events: none in CSS, and swap the icon glyph to a lock symbol. Check the previous module's data-progress before allowing navigation into a locked one if you wire this to real routing.

Yes — replace the href="#" and the preventDefault-based scroll behavior with a real lesson URL once you have routing. The current demo intercepts the click to keep the example self-contained inside the sandbox, but in a real app you'd just navigate normally.

Model modules as an array of objects with title, subtitle, progress, and status fields, map them to rows, and compute the averaged percentage with a reduce in a memoized value or computed property. Drive the ring's stroke-dashoffset from that computed percentage instead of a DOM query, and the CSS ports over unchanged.