Progress Tracker Image Card | 1200x630 PNG for Reading, Running, and Fundraising Goals

Enter a goal title, current/target values, and a unit. The tool draws a clean progress card and exports it as a 1200x630 PNG. Pick from rounded, square, or segmented (20-chunk) bar styles, and choose any background and bar color you want.

💡 Why a Share-Card Tool

Annual reading challenges, marathon training, fundraising thermometers, study-hour logs, indie-game wishlist counters — when you post the running tally somewhere public, you get cheered on and you also stop ghosting yourself. The problem is that text-only "30/50 books done" posts disappear into the feed in seconds, and screenshotting a Notes app every week looks lazy.

This card boils everything down to four things: the goal name, an x / y unit ratio, a big percentage number, and a bar marching toward the target. Nothing else. It reads in half a second on the X timeline, on a LinkedIn Pulse share, or on a Discord pinned message, and it works for almost any countable goal.

Three bar styles cover the common shapes:

• Rounded: soft and friendly. Good for reading challenges, hobby goals, fan campaigns
• Square: sharp and measured. Good for distance, weight, and training logs
• Segmented: 20 discrete chunks. Good for fundraising thermometers, volume-by-volume manga reads, or anything with clean step boundaries

🧐 Frequently Asked Questions

Q. Why is the output locked at 1200x630? A. 1200x630 (1.91:1) is the Open Graph standard share-card size. Facebook, X, LinkedIn, Slack, Discord, WhatsApp, and every other OG-aware platform crops and previews link cards using this aspect ratio. Allowing custom sizes sounds friendlier, but the moment you pick something else the card gets cropped on at least one platform. Locking to 1200x630 means whatever you ship looks correct everywhere.

Q. What happens if my current value exceeds the target? A. The percentage clamps at 100%, and the bar stops at the right edge. This is intentional — you usually want to ship a "goal hit" screenshot, not a confusing 137% bar.

Q. Can I set the target to zero? A. No. The target field requires a value of 1 or higher. Entering 0 is treated as 1.

Q. Can I use decimal values? A. Yes. The current and target fields accept decimals, so 42.195 km marathon distance or fractional dollar amounts work fine. The percentage label always rounds to a whole number for readability.

Q. What if my title is too long? A. The title field caps at 40 characters and the renderer shrinks the font down (to a minimum readable size) until the line fits the card width. 40 characters is enough for "2026 Marathon Training Distance Log" or similar full-sentence titles.

Q. What should I put in the unit field? A. Anything that makes the ratio readable — books, km, pages, USD, hours, chapters, episodes. Leave it blank to show a unit-less ratio like 7 / 10. The unit caps at 20 characters.

Q. What does the downloaded filename look like? A. It uses the ASCII portion of your goal title plus -progress.png. If the title is entirely non-ASCII (Japanese, Arabic, etc.), the file falls back to the slug name progress-tracker-image-card.png.

📚 Why Reading-Challenge Updates Earn Engagement

The reading-challenge progress-bar hack has been around forever — book bloggers in the early 2010s already shared step-by-step tutorials on how to display a "32 / 50 books read" bar in their blog sidebar by feeding numbers into NaNoWriMo-style generators. The behavior never died: every January, Goodreads' Annual Reading Challenge brings the same questions to the surface — how do I show my progress? where do I post it? what should the image look like?

Goodreads itself shows your reading challenge as a bar on your profile, but you cannot really download it as a clean image to share on X or Threads. That gap is exactly what tools like this one fill. A 1200x630 PNG drops cleanly into a tweet, an Instagram Story (after a center-crop), a Discord book club channel, or a Bluesky post, and people recognize "progress bar plus big percent" as a signal they should react to.

A small detail that matters: the percent number is the loudest element on the card on purpose. Skimmers see 64% first, then the goal name, then the ratio, then the bar. That ordering is closer to how feed-skimming attention actually works than the typical "huge title at the top, tiny bar at the bottom" tracker design.