Add a fundraising thermometer to your website

by Owen Roseblade in February 2nd, 2021

If you’re running an online fundraising campaign it can be helpful to publish your current progress towards your fundraising goal. Some fundraising software tools provide a fundraising thermometer or progress indicator as a built-in feature that automatically updates when people donate.

Sometimes you want to be able to add a donation thermometer to a specific page of your website and you need a bit more control.

It’s very easy to create a simple fundraising progress bar yourself with just a few lines of code that will work on any website.

You can then simply update the current amount raised from time to time so that the progress indicator is accurate.

Here is what the fundraising thermometer will look like:

Fundraising thermometer
And here is the code you need to add to your website to achieve this:

<div style="background:#f6f6f6; border:1px solid #e0e0e0; padding:30px;">
  <h2>Fundraising target</h2>
  <p>We're aiming to raise £10,000. So far we've raise <strong>£4,900.</strong></p>
  <div style="border-radius: 5px; background-color: #ffffff; border: 1px solid #4c4c4c; height: 40px;">
    <div style="width:49%; height:100%; border-radius: 4px; background: #2EC971">&nbsp;</div>
  <span style="float: left; ">£0</span> <span style="float: right; ">£10,000</span>
  <div style="clear:both">&nbsp;</div>

The three attributes you will need to change to customise this code to suit your campaign are:

  • The target amount (£)
  • The amount raised so far (%)
  • The accent colour

The amount raised so far is demonstrated by the width of the progress indicator. This is specified as a percentage. So if, like in this example, you’ve raised £4,900 against your target of £10,000 you should set the width to 49%.