Month Progress Bar
This month progress bar answers a question you can only ask about a moving target: how much of the month 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 color strip that runs from the 1st of this month at its left edge to the 1st of the next month at its right, an elapsed line, a remaining line, the local clock, a label that names the day of the month, a stage badge, and a copy button that puts the whole reading into one sentence. The reading refreshes itself once every second, with no page reload needed.
This month’s progress
Elapsed this month
—
| Elapsed | — |
|---|---|
| Remaining | — |
| Local time | — |
What the Month Progress Bar Shows
The card is the progress of the month in five readouts. The percentage of the month passed keeps one decimal place; the bar below it shows the same fraction as a length, and it is labeled with the real dates at the quarter points — for October 2026 those labels read Oct 1 · Oct 8 · Oct 16 · Oct 24 · Nov 1, with the last one belonging to the next month because the interval is half-open on the right. The elapsed line counts what has already happened in days, hours and minutes; the remaining line counts what is left in the same units; and the clock line prints your local time as HH:MM:SS.
Two more pieces of the card are worth naming. The main label under the percentage reads like “Day 4 of 31, October 2026”: it spells out which day of the month you are on and how many days this particular month has, so a 28-day February never looks like a 31-day January. The stage badge turns that into one word of context: First week, Second week, Third week, Fourth week, or Month end.
Of the three progress bars on this site — day, month and year — the month one is the least common, and it is fair to be honest about why: most people think in days and years, not in months. The visitors who do reach for it usually have a monthly horizon: monthly goals (“half of it on the board by the 15th”), billing cycles and statements, and the plain situational awareness of knowing we are halfway through the month. What it is not is a month progress tracker in the project sense: nothing on the card knows about your tasks, your budget lines or your deadlines. This is a clock, not a planner — no custom start or end dates, no labels, no checklists. The month always begins on the 1st at local midnight, and there is nothing to configure.
Nothing here needs a unit system either: 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 the card reads seconds, minutes, hours and days the same way everywhere.
The Formula, the Boundaries and the Display Rules
The app has one formula and a small set of display rules. The formula compares the current time with the two ends of the local month:
\[ P = \frac{t_{now} – t_{1st}}{t_{next} – t_{1st}} \times 100\% \]
where: \( t_{1st} \) is the 1st of this month at 00:00 local time, \( t_{next} \) is the 1st of the next month at 00:00, and \( t_{now} \) is your device clock at this second. The month runs on local time from the 1st to the 1st, and the denominator is the real length of that month — 28, 29, 30 or 31 days, plus or minus another hour in a month that contains a daylight-saving switch — so a 28-day February and a 31-day October are each measured against their own true length. It is never hard-coded to 30 days: a fixed denominator would make the bar run fast or slow for the whole month without ever looking wrong.
The two duration lines under the bar are one sum, not two independent readings. Elapsed is first truncated to the whole minute, and remaining is whatever is left of the month after that truncation:
\[ E = \left\lfloor (t_{now} – t_{1st}) \;/\; 60\ \text{s} \right\rfloor \times 60\ \text{s}, \qquad R = (t_{next} – t_{1st}) – E \]
That is why \( E + R \) equals the length of the month exactly, always: the two printed durations add up to one whole month, and the remaining line cannot collapse to “0 d 00 h 00 m” while the month is still running.
The duration text is assembled so it never misstates the size of a number. Days are not reduced modulo 7 — “27 d” must not print as “6 d” — while hours and minutes are always two digits:
\[ d = \left\lfloor \frac{E}{86400} \right\rfloor, \qquad h = \left\lfloor \frac{E \bmod 86400}{3600} \right\rfloor, \qquad m = \left\lfloor \frac{E \bmod 3600}{60} \right\rfloor \]
so a duration is printed as “3 d 15 h 23 m” and “13 d 09 h 00 m”: the padding on the hour and minute fields is kept, because “13 d 9 h” alone would hide them.
The tick labels on the bar are the real dates at the quarter points, computed from the length of the current month rather than fixed in a template:
\[ T_k = t_{1st} + \frac{k}{4}\,\left(t_{next} – t_{1st}\right), \qquad k = 0, 1, 2, 3, 4 \]
Each label shows the date that instant falls on, so a 31-day month ticks on the 1st, 8th, 16th, 24th and the 1st of the next month, while a 28-day February ticks on the 1st, 8th, 15th, 22nd and the 1st of March. The last tick is next month’s 1st because the interval is half-open: the instant that belongs to the next month is labelled with the next month’s date, the same convention as the day progress bar labelling its end 24:00.
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 month ends. If rounding \( P \) to one decimal would print 100.0% while the month is still going, the card floors the value to the decimal below instead. The string 100.0% belongs only to a month that is actually over.
- Never a false 0.0% at the start. In the first tens of minutes of the month, a rounded 0.0% would claim the month had not begun. The card prints <0.1% instead — the smallest honest thing it can say.
The stage badge follows progress within the month, and its windows tile the month without gaps or overlaps. The first four tiers are fixed day ranges; the last tier follows the length of the actual month, so short months reach it too:
| Day of the month | Stage badge |
|---|---|
| Days 1–7 | First week |
| Days 8–14 | Second week |
| Days 15–21 | Third week |
| Days 22–28 | Fourth week |
| The final 3 days of the month | Month end |
That last row is why February reaches Month end on the 26th, 27th and 28th — or the 27th, 28th and 29th in a leap year — while a 31-day month reaches it on the 29th, 30th and 31st. A badge hard-coded to “the 29th onward” would never show Month end in February at all, and the card would look perfectly reasonable while being wrong.
Precision and boundaries. Results are rounded to what the display can honestly show: the percentage to one decimal place and the durations truncated to the minute, with the two boundary rules 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 Month 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 month that has passed, to one decimal place.
- Read the main label under it: “Day 4 of 31, October 2026” tells you which day of the month you are on and how many days this month has.
- Read the ticks on the bar: the five date labels mark the quarter points, so you can see at a glance which quarter of the month you are in.
- Read the three detail lines: elapsed, remaining and the local clock. Elapsed and remaining are the pair most visitors come for — for example 3 d 15 h 23 m gone and 27 d 08 h 37 m left.
- Read the stage badge for the one-word context: First week, Second week, Third week, Fourth week or Month end.
- 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 status note gets the day of the month, 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; a background tab may be throttled by the browser, but coming back re-syncs at once.
Worked Examples: Three Verified Moments
All three moments below are exact strings from the same snapshot logic the live card uses: a fixed local clock in a fixed month. None of them falls on a daylight-saving switch, so October 2026 is measured against its 31 real days and February 2026 against its 28.
Example 1 — Early in the month: 11.7% on Day 4 of 31 (4 October 2026, 15:23:45)
Mid-afternoon on the 4th, the card reads 11.7%. The elapsed line shows 3 d 15 h 23 m and the remaining line shows 27 d 08 h 37 m, and those two add up to exactly 31 d 00 h 00 m — the whole month — because remaining is the real month length minus elapsed, never an independently rounded second reading. The arithmetic behind it: 3 × 86,400 + 15 × 3,600 + 23 × 60 + 45 = 314,625 seconds have passed out of 31 × 86,400 = 2,678,400, and 314,625 ÷ 2,678,400 × 100 = 11.7467…%, displayed as 11.7%. The clock line prints 15:23:45, the main label reads Day 4 of 31, October 2026, and the stage badge reads First week.
| Readout | Value at 15:23:45 |
|---|---|
| Percentage of month passed | 11.7% |
| Elapsed | 3 d 15 h 23 m |
| Remaining | 27 d 08 h 37 m |
| Clock (local time) | 15:23:45 |
| Main label | Day 4 of 31, October 2026 |
| Stage badge | First week |
The copy button carries the same reading out in one sentence: 11.7% of Day 4 of 31, October 2026 elapsed — 3 d 15 h 23 m gone, 27 d 08 h 37 m left (now 15:23:45, First week).
Example 2 — Halfway: 50.0% on Day 16 of 31 (16 October 2026, 12:00:00)
Noon on the 16th is the exact halfway point of a 31-day month: 15 × 86,400 + 12 × 3,600 = 1,339,200 seconds out of 2,678,400, and 1,339,200 ÷ 2,678,400 × 100 = 50.0% with nothing left over beyond the decimal. Elapsed and remaining both read 15 d 12 h 00 m, and 15 plus 15 days plus 12 plus 12 hours is exactly 31 days. The clock line prints 12:00:00; the main label reads Day 16 of 31, October 2026; the stage badge reads Third week. The midpoint is also a tick: the middle tick of the bar sits at this instant, and because a tick label shows the date at that instant, it reads Oct 16 — one of the five dates Oct 1 · Oct 8 · Oct 16 · Oct 24 · Nov 1.
| Readout | Value at 12:00:00 |
|---|---|
| Percentage of month passed | 50.0% |
| Elapsed | 15 d 12 h 00 m |
| Remaining | 15 d 12 h 00 m |
| Clock (local time) | 12:00:00 |
| Main label | Day 16 of 31, October 2026 |
| Stage badge | Third week |
The copy button gives: 50.0% of Day 16 of 31, October 2026 elapsed — 15 d 12 h 00 m gone, 15 d 12 h 00 m left (now 12:00:00, Third week).
Example 3 — A short month: 47.8% on Day 14 of 28 (14 February 2026, 09:00:00)
February 2026 has 28 days, so the denominator is 28 × 86,400 = 2,419,200 seconds. At 09:00 on the 14th, 13 × 86,400 + 9 × 3,600 = 1,155,600 seconds have passed, and 1,155,600 ÷ 2,419,200 × 100 = 47.7678…%, displayed as 47.8%. Elapsed reads 13 d 09 h 00 m and remaining reads 14 d 15 h 00 m — together they are exactly 28 d 00 h 00 m. The clock line prints 09:00:00, the main label reads Day 14 of 28, February 2026, and the stage badge reads Second week, because day 14 is the last day of the 8–14 window. The five ticks fall on Feb 1 · Feb 8 · Feb 15 · Feb 22 · Mar 1 — 28 days split into four equal quarters. Later in the same February, on the 26th, 27th and 28th, the badge flips to Month end: the tier that follows the real length of the month rather than a fixed calendar date.
| Readout | Value at 09:00:00 |
|---|---|
| Percentage of month passed | 47.8% |
| Elapsed | 13 d 09 h 00 m |
| Remaining | 14 d 15 h 00 m |
| Clock (local time) | 09:00:00 |
| Main label | Day 14 of 28, February 2026 |
| Stage badge | Second week |
The copy button gives: 47.8% of Day 14 of 28, February 2026 elapsed — 13 d 09 h 00 m gone, 14 d 15 h 00 m left (now 09:00:00, Second week).
Month Progress Bar FAQ
Does the month 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 the month ends?
Because 100.0% is reserved for a month that is actually over. Near the end of the month, rounding can push the number up to 100.0% while time still remains, and that would read as “the month 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% in the first minutes of the month?
In the first tens of minutes the honest statement is “a little has passed”, so the card prints <0.1% rather than 0.0%, which would claim the month 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 the month length?
Yes, by construction. Elapsed is truncated to the whole minute first, and remaining is the length of the month minus elapsed, so the two always sum to exactly one month — for example 3 d 15 h 23 m and 27 d 08 h 37 m add up to 31 d 00 h 00 m. The remaining line can only reach 0 d 00 h 00 m once the month is actually over.
Why do the tick labels change from month to month?
Because they are the real dates at the quarter points, and months are not all the same length. A 31-day month ticks on the 1st, 8th, 16th, 24th and the next 1st; a 28-day February ticks on the 1st, 8th, 15th, 22nd and 1 March. Quartering a month does not land on a fixed day number, so the labels are computed when the page loads instead of being written into the template.
When does the stage badge say “Month end”?
On the final 3 days of the actual month: the 29th–31st in a 31-day month, but already the 26th–28th in a 28-day February, or the 27th–29th in a leap year. Tying the last tier to the real length of the month is what lets short months reach it at all.
What happens in a month that contains a daylight-saving switch?
The bar follows the real length of the month, so a month containing a spring-forward day is an hour shorter than its date count suggests, and a fall-back month an hour longer. The percentage is computed against that true length rather than a hard-coded 30 days, so the card is not an hour fast or an hour slow in those months.
Can I set a custom start or end date, or track a project with it?
No. This is a clock, not a task tracker: it always measures the calendar month, from the 1st at local midnight to the 1st of the next month, any attribute written on the shortcode or block is ignored, and there are no settings, labels or checklists to fill in.
Related Tools
The month progress bar is the middle member of the progress family. When the horizon you care about is a single day, the day progress bar counts from midnight to midnight in hours, minutes and seconds; when it is a whole year, the year progress bar tracks the progress of the year in days. All three share the 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.