Classic Productivity Bar showing timer and progress modes across the top of a monitor
Classic Productivity Bar
Visualize time and progress across your entire monitor—like an hourglass, but better
Try It Out!

What It Does


Progress bar mode showing task completion visualization Progress Mode: Track task completion (e.g., 3/6 peer reviews) with visual feedback.

Why I Built This

I needed a better way to visualize time passing during work sessions. Traditional timers show numbers—abstract and easy to ignore. I wanted something visceral, something that would occupy my entire field of vision without being intrusive. Like an hourglass, but spanning the entire width of my monitor.

The idea was simple: if time is always visible in my peripheral vision, I'd develop a better intuition for how long tasks actually take. And if I could compare time elapsed against actual progress made, I could start to calibrate my time estimates and identify when I was getting distracted or blocked.


Timer mode showing continuous time progression Timer Mode: Pure time tracking that progresses across your entire screen.

How It Works

The Classic Productivity Bar is a desktop application built with vanilla JavaScript, HTML, and CSS. It uses a fixed window positioned at the top of the screen (designed for 4K resolution: 3840x180px). The timer updates every second using JavaScript intervals, and the visual bar width adjusts proportionally using CSS percentage calculations.

The Progress Mode allows manual increment/decrement of task completion, while Timer Mode runs continuously. The hidden Session Timer tracks both total session time and active work time, calculating productivity as a percentage. All settings (hourly rate, night mode, productivity tracking) persist in localStorage. The celebration animation triggers using JavaScript event listeners at configurable milestones.


Session timer interface showing duration and productivity metrics Session Timer: Track total session time and productivity percentage.

Impact

By the numbers:

What changed:


Celebration animation when earning milestone is reached Celebration feedback: Visual and audio cues every 15 minutes or $5 earned.

Challenges & Solutions

The biggest challenge was designing for constant visibility without distraction. The bar needed to be noticeable enough to provide constant feedback, but subtle enough not to pull focus from actual work. I solved this through careful color choices and minimal UI—no numbers, no text, just a progressing bar.

Another challenge: I didn't know how to make responsive designs at the time, so I fixed it to 4K resolution (3840x180px). This was a limitation, but it taught me to design for my own use case first. The tool worked perfectly on my setup, which was what mattered. Future versions could be responsive, but sometimes "works for me" is a valid design decision for personal tools.


Settings panel for configuring hourly rate, night mode, and productivity tracking Settings: Customize hourly rate, night mode, and productivity tracking preferences.

What I Learned

I learned that peripheral awareness is a powerful design tool. By putting time in my peripheral vision rather than requiring me to check it, the tool integrated into my workflow seamlessly. I also learned the value of dual-mode interfaces—having both Timer Mode and Progress Mode meant the tool adapted to different types of tasks.

Most importantly, I learned that personal productivity tools don't need to be perfect or feature-complete. This tool has rough edges (fixed resolution, no cloud sync, manual progress tracking), but it solved the exact problem I had. Sometimes constraints breed focus.

Technical lessons:

Future improvements (if I revisited this):


Night mode interface with darker color scheme Night Mode: Easier on the eyes for late-night work sessions.

Links