# Learning progress dashboard
> A dark indigo course dashboard: three progress rings fill to 72, 45 and 90 percent while a weekly study chart grows.
- Category: Developer tools
- Version: 1.0
- Source: https://ownlyplans.com/bhaskar/learning-progress-dashboard/
## 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.
## Tech stack
- CSS
- Dashboard
- HTML
## Build steps
### 1. Paste the prompt
The AI builds the rings and the bar chart.
Prompt:
```text
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.
## Assets
### prompt.md — The full prompt.
~~~~
# Learning progress dashboard
Copy this prompt into Claude, Cursor or Lovable.
```text
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.
```
~~~~
### index.html.md — Complete code of the result in the video.
~~~~
# index.html
The finished result as one file. Save it as index.html and open it.
```html
Learning progress
Learning progress
Your three active courses this week
Day streak12
UX Foundations
18 of 25 lessons
Intro to SQL
9 of 20 lessons
Brand Writing
27 of 30 lessons
Minutes studied this week
Mon
Tue
Wed
Thu
Fri
Sat
Sun
```
~~~~
## Build instructions by tool
### Claude Code
Open a terminal in an empty folder, run `claude`, then paste the prompt.
```text
Build the "Learning progress dashboard" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/learning-progress-dashboard/.
Stack: CSS, Dashboard, HTML.
Follow the plan's steps in order: Paste the prompt → Check the rings → Check the bars → Make it real.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Claude Code.)
```
### Cursor
Open an empty folder in Cursor, start an Agent chat, then paste the prompt.
```text
Build the "Learning progress dashboard" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/learning-progress-dashboard/.
Stack: CSS, Dashboard, HTML.
Follow the plan's steps in order: Paste the prompt → Check the rings → Check the bars → Make it real.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Cursor.)
```
### Lovable
Start a new Lovable project and paste the prompt as your first message.
```text
Build the "Learning progress dashboard" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/learning-progress-dashboard/.
Stack: CSS, Dashboard, HTML.
Follow the plan's steps in order: Paste the prompt → Check the rings → Check the bars → Make it real.
Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md.
Ask me before adding anything not in the plan. (Prepared for Lovable.)
```
## Definition of done
- Every build step is complete and the app runs locally.
- The main user flow works end to end.
- Share your build on OwnlyPlans with a demo link, build time and tool.