64% elapsed YEAR PROGRESS

Year Progress is a lightweight, single-file HTML page that shows how much of the current year has elapsed — a live year progress bar with a percentage ring, day-of-year counter, days remaining, and free days (weekends) remaining.

Inspired by dayleft.

• Live percentage ring — SVG circular progress indicator, updated every 60 seconds
• Day of year counter — current day number out of 365 or 366
• Days remaining — total days left in the year
• Free days remaining — count of Saturdays and Sundays left
• Leap year detection — automatically shows a LEAP badge and adjusts total days
• Dark theme — deep dark background with orange accent (#ff6b35)
• Responsive — works on desktop, tablet, and mobile
• Zero dependencies — no CDN, no frameworks, no external resources
• Single file — everything (HTML, CSS, JS) in one file, ready to deploy

The page calculates year progress entirely in the browser using JavaScript's Date API. The flow:

flowchart TD
    A[Get current date & time] --> B[Determine year Y]
    B --> C{Is Y a leap year?}
    C -->|Yes| D[Set total days = 366]
    C -->|No| E[Set total days = 365]
    D --> F[Calculate day-of-year from Jan 1]
    E --> F
    F --> G[Compute progress = dayOfYear / totalDays]
    G --> H[Update SVG ring stroke-dashoffset]
    G --> I[Update thin bar width]
    G --> J[Display percentage]
    G --> K[Compute days left = totalDays - dayOfYear]
    K --> L[Display days remaining]
    K --> M[Count weekends from tomorrow to Dec 31]
    M --> N[Display free days remaining]
    N --> O[Schedule next update in 60 s]

The ring uses an SVG <circle> with stroke-dasharray and stroke-dashoffset. The circumference is 2 × π × radius. As progress increases, the offset decreases, creating the fill animation.

🔗 soumendrak.github.io/yearprogress/

1. Open index.html in any modern browser.
2. No build step, no server, no installation required.
3. Deploy on GitHub Pages, Netlify, or any static host.

# Clone the repo
git clone https://github.com/soumendrak/yearprogress.git

# Open directly
open yearprogress/index.html

_{Built with ❤️ and zero dependencies}