How-to guides

How to add a progress bar to a GitHub README

Published September 27, 2026 · GitHub steps checked against its docs on September 27, 2026

A funding goal, issues closed before a release, a migration that is 70% done: a README is where people look first. A progress bar there is an image, and DynaMail draws it from two numbers in its link, current and target, so it takes one line of Markdown and no build step.

Progress bar rendered by DynaMail showing 34 toward a target of 50
An example render from DynaMail’s image pipeline. Your design, dates and values will differ.

What you need

  • A repository you can edit. GitHub surfaces a README from the repository’s .github folder, its root, or its docs folder, in that order.
  • Two numbers: where you are (current) and where you are going (target).

Add the bar, step by step

  1. Build the bar and copy its Markdown

    Enter the two numbers in the free progress bar generator and generate it. Under Where are you pasting it?, choose GitHub README and copy the line. Your widget id replaces YOUR-WIDGET-ID, and the text in square brackets is the alt text, which you can rewrite:

    Progress bar for a README

    ![Issues closed toward v2.0](https://img.dynamail.io/widgets/YOUR-WIDGET-ID/render.png?current=34&target=50)

  2. Open README.md for editing

    In your repository, browse to README.md and click the pencil icon, Edit file, in the upper right corner of the file view.

  3. Paste the line and preview it

    Paste the Markdown where the bar should appear, on a line of its own. Click Preview above the editor to see it rendered.

  4. Commit

    Click Commit changes…, add a message, and click Commit changes (or Propose changes if you are committing to a new branch).

  5. Update it by changing one number

    When you close more issues, change current=34 to the new count and commit again. No new image is generated or uploaded: the link itself carries the numbers.

How GitHub shows the image

GitHub does not load README images straight from DynaMail in your visitors’ browsers. It serves them through Camo, its image proxy, which hides viewers’ browser details and keeps its own copy of each image. That is why the numbers belong in the link: a new number makes a new link, and GitHub has no copy of a link it has never seen.

A bar that updates without a commit

Editing the README for every change is fine for a release milestone, but not for a number that moves daily. Claim the bar into a free account and it gets a live value you can set from Zapier, Make, n8n or the DynaMail API. Leave current out of the link so the live value fills it:

The same bar, reading its live value

![Issues closed toward v2.0](https://img.dynamail.io/widgets/YOUR-WIDGET-ID/render.png?target=50)

Once a live value has been set, DynaMail serves the image with Cache-Control: no-store, no-cache, which is what GitHub’s docs ask for. GitHub does not say how soon Camo fetches such an image again, so allow for some lag between a new value and what your README shows.

About the design

The free generator’s bar is worded as a points balance, as in the example above: it shows the current number, the target, and how many are left. To change the words to “issues closed” or “raised so far”, claim the bar and edit its design in the dashboard; the link stays the same. For a donation goal, the free fundraising thermometer is already worded for money raised, and has a GitHub README tab too.

Sources

Every GitHub step above comes from these pages, read on September 27, 2026. Apps rename menus often; if a step no longer matches what you see, the source page is the place to check.

  1. GitHub Docs: Basic writing and formatting syntax (opens in a new tab)
  2. GitHub Docs: About the repository README file (opens in a new tab)
  3. GitHub Docs: Editing files (opens in a new tab)
  4. GitHub Docs: About anonymized URLs (opens in a new tab)

Frequently asked questions

Why does my README still show the old bar?

GitHub shows README images through Camo, its image proxy, which keeps its own copy. If you change the numbers in the link, the link is new and GitHub fetches it. GitHub’s docs also describe purging a cached image with curl -X PURGE on its camo.githubusercontent.com address.

Can the bar update without editing the README?

Yes, with a free account: leave current out of the link and push new values from Zapier, Make or the API. DynaMail then serves the image with Cache-Control: no-cache, as GitHub’s docs ask, though GitHub does not say how soon Camo fetches it again.

Does it work in my profile README?

Yes. GitHub shows the README of a public repository named after your username on your profile, and the same Markdown image line works there.

Can DynaMail see who views my README?

No. GitHub fetches the image through Camo, which hides viewers’ browser details, so DynaMail sees a request from GitHub’s proxy rather than from your visitors.