Evergreen Code

Guides

How to Add a Fundraising Progress Bar or Thermometer to Your Website

October 15, 2026 · 5 min read

A fundraising thermometer is one of the oldest tricks in fundraising, and it still works. People give more readily when they can see a goal, see that others have already given, and see that the gap is small enough for their gift to matter.

Most campaigns already have the thermometer on a poster in the lobby. This guide shows how to put one on your website too, where it's seen by everyone who visits the giving page, opens your newsletter link or checks in from out of town.

What a good progress bar shows

Keep it to the few things a donor needs at a glance:

  • The amount raised and the goal. "$12,480 raised of $20,000" is clearer than a percentage alone.
  • A visible bar or thermometer. The picture does most of the work.
  • Proof that others have given. "86 donors" tells people they're joining something.
  • A deadline. "77 days left" gives a reason to give now rather than later.
  • One clear button. Link straight to your giving page, with wording that names the cause: "Give to the roof fund".

Milestones help with longer campaigns. Marking $5,000, $10,000 and $15,000 along the bar gives you something to celebrate in the newsletter every few weeks.

The free way: a progress bar in plain HTML

If you only need a simple bar and you don't mind editing it by hand, paste this into an HTML or code block on your site and change the numbers:

<div style="max-width:560px;font-family:inherit">
  <p style="margin:0 0 6px;font-size:1.6em;font-weight:700">$12,480 <span style="font-size:.6em;font-weight:400">raised of $20,000</span></p>
  <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="62" aria-label="Fundraising progress"
       style="height:16px;background:#e6e6e6;border-radius:99px;overflow:hidden">
    <div style="width:62%;height:100%;background:#1d5c45"></div>
  </div>
  <p style="margin:8px 0 0">62% of our goal · <a href="https://example.org/give">Give now</a></p>
</div>

To update it, change three things: the amount raised, the width percentage, and aria-valuenow (the same percentage, for screen readers). Work out the percentage as raised ÷ goal × 100, rounded down, and cap it at 100.

This is fine for a short campaign with one person in charge of the website. It gets harder when the total changes every day, when the person who knows the total isn't the person with the website login, or when you want a thermometer, milestones or a countdown.

The easier way to keep it current: drive it from a spreadsheet

Most organizations already track gifts in a spreadsheet or can export them from their giving platform. If the website reads its numbers from a Google Sheet, whoever keeps the books can update the total and the website follows, without touching the site.

There are two ways to set up the sheet:

  1. A settings sheet. One row for the amount raised, one for the goal, and rows for the title, deadline and button link. Someone types in the new total after each service or each week.
  2. A list of gifts. One row per gift with a date and amount (names are optional and stay in the sheet). The tracker adds them up and counts the gifts. This is handy when you can paste in an export from your giving platform.

Either way, publish the sheet as CSV (File → Share → Publish to web, choose the tab, pick Comma-separated values) and give the link to the tracker. Google updates published sheets automatically, usually within a few minutes of an edit.

A note on privacy: anyone with the published link can open the sheet. If your gift list includes donor names, either delete the name column before publishing or keep names on a separate tab that you don't publish.

For a deeper look at connecting a sheet to a web page, see How to Display a Google Sheet on Your Website.

Adding it on your platform

Every popular site builder has a block for custom HTML. That's where a progress bar goes, whether it's the free code above or a ready-made tracker.

  • Squarespace: add a Code block. Squarespace only runs JavaScript in Code Blocks on certain plans (currently Core and above, according to its help center). Plain HTML, like the free bar above, displays on any plan. Custom code may not run while you're editing, so check the live page in a private window.
  • WordPress: in the block editor, add a Custom HTML block. On WordPress.com, custom code that includes scripts needs a plan that allows it; self-hosted WordPress has no such limit.
  • Wix: add Embed Code → Embed HTML (in Wix Studio, Add → Embed → HTML) and paste the code. Wix shows it in a frame, so drag the frame tall enough that nothing is cut off.
  • Webflow, Shopify (2.0 themes), Ghost and Carrd all have an embed or custom HTML block that works the same way.

Where to put it: at the top of your giving page, on the home page during the campaign, and on any page you link to from emails and social posts. A thermometer on its own campaign page, next to the story of what the money is for, is usually the strongest spot.

Tips that help a campaign

  • Start with momentum. If you can, launch publicly after a few lead gifts are in. A bar at 30% gets more gifts than a bar at 0%.
  • Update it often. A total that hasn't moved in three weeks looks like a stalled campaign, even when gifts are coming in.
  • Celebrate milestones. Each one is a reason to send an update and share the page again.
  • Show it at events. At a gala or a giving Sunday, put the page on the big screen and let people watch it climb.
  • Say what happens next when you reach the goal: a stretch goal, a thank-you, or a photo of the finished project.

The ready-made option

Goal Tracker is a fundraising progress bar and thermometer built for exactly this. Paste one snippet, add your Google Sheet link, and it shows the amount raised, the goal, donors, days left, milestones and a Give button that links to the giving page you already use. It can add up a list of gifts for you, show separate campaigns from one sheet, and refresh on its own for a lobby or event screen. It uses your site's fonts, works on phones, and is built to be accessible.

It's a one-time purchase from $19 for one website, with no subscription, and the download includes step-by-step instructions for Squarespace, WordPress, Wix and more.

Try the live demo, or ask us whether it will work on your site.