Learning progress dashboard
A dark indigo course dashboard: three progress rings fill to 72, 45 and 90 percent while a weekly study chart grows.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
Overview
A learner overview with a day-streak badge. Three coloured rings fill and count up, then seven study-time bars grow for the week. Topic inspired by OpenDesign’s public dashboard prompt list; this prompt and design are written from scratch.
Build it step by step
Sign in to tick steps off-
1
Paste the prompt
The AI builds the rings and the bar chart.
Create a single-file HTML learning progress dashboard, 1280x720, deep indigo background #120f2a, cards #1b1640 with 1px #2b2461 border and 22px radius, accent violet #a78bfa, green #34d399, amber #fbbf24, text #ece9ff. System fonts, no libraries. Header: H1 "Learning progress", muted "Your three active courses this week" and a right aligned card "Day streak 12". Row of three course cards, each with a 150px ring made with conic-gradient (hole 118px) whose percentage is a CSS @property integer counter shown in the centre: UX Foundations 72% (violet, 18 of 25 lessons), Intro to SQL 45% (green, 9 of 20), Brand Writing 90% (amber, 27 of 30). Below: a wide card "Minutes studied this week" with seven gradient bars (Mon to Sun) of different heights. Motion (8 second loop): cards rise in with a stagger, rings fill from 0 and the numbers count up, then the bars grow from 6px to their heights. Everything fades and restarts. Respect prefers-reduced-motion. Return only the complete HTML.
-
2
Check the rings
Rings and numbers should fill together.
-
3
Check the bars
Bars should grow after the rings.
Done when You can see it working in the browser.
-
4
Make it real
Load progress from your course platform.
Files and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.