Day Progress Bar
This day progress bar answers one question all day long: how much of the day is left. There is nothing to type — the only input is the current time — so the page opens with the answer already on screen: a large percentage, a colour strip that runs from 00:00 at its left edge to 24:00 at its right, an elapsed line and a remaining line, the local clock, a stage badge, and a copy button that puts the whole reading into one sentence. Everything refreshes once every second, with no page reload needed.
Today’s progress
Elapsed today
—
| Elapsed | — |
|---|---|
| Remaining | — |
| Local time | — |
What the Day Progress Bar Shows
The card is the progress of the day in five readouts. The percentage of day passed keeps one decimal place; the bar below it shows the same fraction as a length; the elapsed line counts what has already happened; the remaining line counts what is left; and the clock line prints your local time as HH:MM:SS. A stage badge names the stretch of day you are in — Night, Morning, Late morning, Noon, Afternoon or Evening — and the current time progress runs on your own local clock, so the reading is right whether you are at home or several time zones away from where you started the morning.
It is fair to call it a day progress tracker rather than a planner, because it knows nothing about your calendar. It only knows where the clock is — and that is precisely what makes it useful, along with a few honest limits:
- Noticing the workday. Before starting a task that needs two hours of real attention, a glance at the bar tells you whether the afternoon still has room for it.
- Deadline awareness. Reading that 64.1% of the day is gone is a different feeling from “I still have time” — the number makes the hours that remain concrete.
- Journaling. The sentence from the copy button is a timestamp with context: the date, both durations, the clock and the stage in one paste.
- What it is not. This is a clock, not a timer: no alarms, no countdowns, no custom start times and no settings at all. Those are deliberate omissions, not missing features.
Nothing on the page needs a unit system either: there is no distance in miles or kilometers, no weight in pounds or kilograms, and no unit toggle to touch — the only quantity in play is time, and time reads the same everywhere.
The Formula, the Boundaries and the Display Rules
The app has one formula and two display rules. The formula compares the current time with the two ends of the local day:
\[ P = \frac{t_{now} – t_{0}}{t_{1} – t_{0}} \times 100\% \]
where: \( t_{0} \) is the local midnight that began today, \( t_{1} \) is the next local midnight, and \( t_{now} \) is your device clock at this second. The day runs on local time from 00:00 to 00:00, and the denominator is the real length of that day — a plain day is 86,400 seconds, a spring-forward day 82,800 seconds and a fall-back day 90,000 seconds — so on a daylight-saving switch day the bar follows the 23- or 25-hour length instead of running a day fast or a day slow.
The two duration lines under the bar are one sum, not two independent readings. Elapsed is first truncated to the whole second, and remaining is whatever is left of the day after that truncation:
\[ E = \left\lfloor (t_{now} – t_{0}) \;/\; 1\ \text{s} \right\rfloor \text{ s}, \qquad R = (t_{1} – t_{0}) – E \]
That is why \( E + R = t_{1} – t_{0} \) holds exactly, always: the two printed durations add up to one whole day, and the remaining line cannot collapse to 0 h 00 m 00 s while the day is still running.
The duration text is assembled so it never misstates the size of a number. Hours are neither padded nor reduced modulo 12; minutes and seconds are always two digits:
\[ h = \left\lfloor \frac{E}{3600} \right\rfloor, \qquad m = \left\lfloor \frac{E \bmod 3600}{60} \right\rfloor, \qquad s = E \bmod 60 \]
so a duration is printed as “15 h 23 m 45 s” and “6 h 00 m 00 s” — the zeros on the minute and second fields are kept, because “6 h” alone would hide them — while a nearly finished day still reads 23 h, never 11.
The percentage is rounded to one decimal place, with two boundary rules that exist so the card never contradicts itself:
- Never 100.0% before the day ends. If rounding \( P \) to one decimal would print 100.0% while the day is still going, the card floors the value to the decimal below instead. The string 100.0% belongs only to a day that is actually over.
- Never a false 0.0% at the start. In the first few tens of seconds, a rounded 0.0% would claim the day had not begun. The card prints <0.1% instead — the smallest honest thing it can say.
The stage badge is read straight from the local clock, and its windows tile the day without gaps or overlaps — each range is half-open, so a new badge begins exactly on its hour:
| Local time | Stage badge |
|---|---|
| 00:00 – 05:00 | Night |
| 05:00 – 09:00 | Morning |
| 09:00 – 12:00 | Late morning |
| 12:00 – 14:00 | Noon |
| 14:00 – 18:00 | Afternoon |
| 18:00 – 22:00 | Evening |
| 22:00 – 24:00 | Night |
Precision and boundaries. Results are rounded to what the display can honestly show: the percentage to one decimal place and the durations to the second, with the truncation rule above. Because the app has no inputs at all, there is no validation to trip over — no field must be greater than zero, nothing can be typed in the wrong format, and an attribute written on the shortcode or block is simply ignored rather than applied.
How to Use the Day Progress Bar
There is nothing to set up — the app takes no inputs and has no settings — so using it is really a reading order:
- Open the page. The card is live immediately: no start button, no field to fill in, nothing to submit.
- Read the large number first: it is the percentage of the day that has passed, to one decimal place.
- Read the bar second: it turns the same fraction into a length filled from the left, which makes half a day visible at a glance.
- Read the three detail lines: elapsed, remaining and the local clock. Elapsed and remaining are the pair most visitors come for — for example 15 h 23 m 45 s gone and 8 h 36 m 15 s left.
- Read the stage badge for the one-word context: Afternoon at 15:23:45, Morning at 06:00:00, Evening at 21:30:00.
- Press the copy button when the reading needs to travel: it copies the same sentence shown on the page, so a journal entry, a chat message or a note gets the date, the percentage, both durations, the clock and the stage in one paste.
- Leave the tab open if you like. Every tick recomputes the whole snapshot from the current time, so nothing drifts, and coming back to a background tab re-syncs at once.
Worked Examples: Three Verified Moments
All three moments are on Sunday, 4 October 2026 in a 24-hour local day (none of them falls on a daylight-saving switch), so each is worked out from the same 86,400-second total. Every figure in the tables below is the exact string the card displays at that instant.
Example 1 — Mid-afternoon, 64.1% at 15:23:45
In the middle of the afternoon the card reads 64.1%. The elapsed line shows 15 h 23 m 45 s and the remaining line shows 8 h 36 m 15 s, and those two add up to exactly 24 h 00 m 00 s — the whole day — because remaining is the day length minus elapsed, never an independently rounded second reading. The arithmetic behind it: 15 × 3,600 + 23 × 60 + 45 = 55,425 seconds have passed out of 86,400, and 55,425 ÷ 86,400 × 100 = 64.1493…, displayed as 64.1%. The clock line prints 15:23:45 and the stage badge reads Afternoon, because the 14:00–18:00 window covers this hour.
| Readout | Value at 15:23:45 |
|---|---|
| Percentage of day passed | 64.1% |
| Elapsed | 15 h 23 m 45 s |
| Remaining | 8 h 36 m 15 s |
| Clock (local time) | 15:23:45 |
| Stage badge | Afternoon |
The copy button carries the same reading out in one sentence: 64.1% of Sunday, 4 October 2026 elapsed — 15 h 23 m 45 s gone, 8 h 36 m 15 s left (now 15:23:45, Afternoon).
Example 2 — Early morning, 25.0% at 06:00:00
Early morning is the clean quarter: at 06:00:00 exactly a quarter of the day is gone, so the card reads 25.0%. Elapsed is 6 h 00 m 00 s and remaining is 18 h 00 m 00 s — 6 plus 18 is 24, one full day — and the arithmetic is exact: 6 × 3,600 = 21,600 seconds out of 86,400, and 21,600 ÷ 86,400 × 100 = 25.0% with nothing left over beyond the decimal. The clock line prints 06:00:00 and the badge reads Morning, the 05:00–09:00 window most people spend getting ready or commuting.
| Readout | Value at 06:00:00 |
|---|---|
| Percentage of day passed | 25.0% |
| Elapsed | 6 h 00 m 00 s |
| Remaining | 18 h 00 m 00 s |
| Clock (local time) | 06:00:00 |
| Stage badge | Morning |
The copy button gives: 25.0% of Sunday, 4 October 2026 elapsed — 6 h 00 m 00 s gone, 18 h 00 m 00 s left (now 06:00:00, Morning).
Example 3 — Late evening, 89.6% at 21:30:00
Late evening shows how much of the day is left in the most literal way: 21 h 30 m 00 s is already gone and only 2 h 30 m 00 s remains, so the card reads 89.6%. The arithmetic: 21 × 3,600 + 30 × 60 = 77,400 seconds out of 86,400, and 77,400 ÷ 86,400 × 100 = 89.5833…, displayed as 89.6%. The clock line prints 21:30:00 and the badge says Evening; at 22:00 the badge flips back to Night for the last stretch before midnight.
| Readout | Value at 21:30:00 |
|---|---|
| Percentage of day passed | 89.6% |
| Elapsed | 21 h 30 m 00 s |
| Remaining | 2 h 30 m 00 s |
| Clock (local time) | 21:30:00 |
| Stage badge | Evening |
The copy button gives: 89.6% of Sunday, 4 October 2026 elapsed — 21 h 30 m 00 s gone, 2 h 30 m 00 s left (now 21:30:00, Evening).
Day Progress Bar FAQ
Does the day progress bar update on its own?
Yes — the reading refreshes once every second, and there is nothing to reload. If you leave the tab in the background, the browser may slow those updates down; the moment you come back, the card re-runs the clock and shows the correct number immediately.
Why does the percentage never show 100.0% before midnight?
Because 100.0% is reserved for a day that is actually over. Near midnight, rounding can push the number up to 100.0% while seconds still remain, and that would read as “the day has ended” — so when that rounding would cross the line, the card floors the value to the decimal below instead.
Why is the reading below 0.1% just after midnight?
In the first few tens of seconds of the day the honest statement is “a little has passed”, so the card prints <0.1% rather than 0.0%, which would claim the day had not begun. The moment the true value reaches a tenth of a percent, the normal one-decimal reading takes over.
Do the elapsed and remaining lines always add up to a whole day?
Yes, by construction. Elapsed is truncated to the whole second first, and remaining is the length of the day minus elapsed, so the two always sum to exactly one day. The remaining line can only reach 0 h 00 m 00 s once the day is actually over — it never runs out early while seconds are still ticking.
What is the stage badge, and when does it change?
The badge names the part of the day you are in, using your local clock. Night covers 00:00 to 05:00, Morning 05:00 to 09:00, Late morning 09:00 to 12:00, Noon 12:00 to 14:00, Afternoon 14:00 to 18:00, Evening 18:00 to 22:00, and Night returns from 22:00 to 24:00. Each range is half-open, so a new badge begins exactly on its hour, with no minute of the day left unnamed.
What happens on daylight-saving switch days?
The bar follows the real length of the local day — 23 hours on the spring-forward day and 25 on the fall-back day — so the progress is never a day fast or a day slow. In New York, for example, 8 March 2026 lasts 23 hours and 1 November 2026 lasts 25, and the percentage is computed against those true lengths rather than a hard-coded 24 hours.
Can I set a custom start time, or use it as a timer or alarm?
No. This is a clock, not a timer: it has no settings at all, any attribute written on the shortcode or block is ignored, and it deliberately offers no alarms, no countdowns and no custom start times — the day always begins at your local midnight.
Related Tools
The day progress bar is the smallest member of the progress family. When a day is too short a horizon, the month progress bar counts from the 1st to the 1st in days, hours and minutes, and the year progress bar tracks day X of 365 or 366. Both share the same no-input, updates-itself design. And if you came here to do arithmetic with the clock — overtime, timesheet hours, elapsed gaps — the calculator is the right stop.