Donation Widget with Progress Bar

A Donation Widget with a Progress Bar is a simple way to encourage giving by showing progress towards a target. It combines a donation input field or button with a progress bar that updates as more donations come in.

How does it work?

The widget shows:

• Goal – the total amount you’re raising.
• Current – the total amount raised so far.
• Progress Bar – how far you are from your goal.

When a user donates the widget updates in real-time so they get instant feedback and a sense of accomplishment.

Benefits of a Donation Widget

• Motivates Donors – The progress bar fills up and people give.
• Transparency – Shows the campaign status and builds trust with donors.
• Easy to Use – Simple and user friendly interface makes donating quick and painless.

Use Cases

• Nonprofits and Charities – For online fundraising campaigns.
• Crowdfunding Projects – For backers to see the campaign momentum.
• Event Fundraisers – To show progress towards specific event goals.

HTML Structure

<div class="sf-donate">

  <h2>Support Our Mission:<br /> Feeding Animals Together</h2>

  <p class="number"><span class="currency">$</span>150,000</p>
  <div class="progress-bar" style="--bar-width: 54%" data-progress="54%"><span></span></div>

  <ul class="stats">
    <li>We've already raised <b>$79,985</b></li>
    <li><b>8198</b> people have donated</li>
  </ul>

  <a class="button" href="#"><i class="fa-solid fa-hand-holding-dollar"></i> Make a donation</a>
  <a class="button secondary" href="#"><i class="fa-regular fa-circle-question"></i> See how to help</a>

  <p class="desc">Lorem ipsum <a href="#"> sit amet consectetur</a> adipisicing elit</p>

</div>

Styling the Donation Widget

/* --------------------------- */
/*  Snippflow Donation Widget  */
/* --------------------------- */

.sf-donate {
  --sf-donate-bar-bg: rgba(0,0,0,.05);
  --sf-donate-bar-progress-bg: #63D9B3;
  --sf-donate-bar-point-bg: #63D9B3;
  --sf-donate-bar-point-border: #E8FFF7;
}

.sf-donate { max-width: 700px; text-align: center; margin: 50px auto; }
.sf-donate > * { margin-bottom: 35px; }
.sf-donate h2 { font-size: clamp(1.2rem, 4vw, 50px); line-height: 1.2; font-weight: 600; }

.sf-donate .number { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(2.5rem, 10vw, 130px); letter-spacing: -2%; line-height: 1; font-weight: 600; color: #46A787; background: rgb(99,217,179); background: linear-gradient(260deg, rgba(99,217,179,1) 0%, rgba(70,167,135,1) 51%, rgba(83,198,160,1) 100%); background-clip: text;  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  }
.sf-donate .number .currency { font-size: 30%; font-weight: 100; }

.sf-donate .progress-bar { display: flex; position: relative; height: 10px; border-radius: 5px; background-color: var(--sf-donate-bar-bg); }
.sf-donate .progress-bar > span { display: block; position: relative; width: 0; height: 100%; border-radius: 5px; background-color: var(--sf-donate-bar-progress-bg); animation: bar-animation 2s ease-in-out forwards; }
.sf-donate .progress-bar > span:after { content: ""; width: 20px; height: 20px; border-radius: 100%; background-color: var(--sf-donate-bar-point-bg); border: 5px solid var(--sf-donate-bar-point-border); position: absolute; left: 100%; top: 50%; transform: translate(-15px,-15px); }

.sf-donate .stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 30px; list-style: none; }
.sf-donate .desc { opacity: .5; filter: saturate(0%); }

.sf-donate a.button { display: inline-flex; align-items: center; gap: 10px; margin-left: 3px; margin-right: 3px; padding: 15px 30px; background: #46a787; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all .3s ease-in-out; }
.sf-donate a.button:hover { background-color: #4eba96; }
.sf-donate a.button.secondary { background: #393939; }
.sf-donate a.button.secondary:hover { background: #505050; }

@keyframes bar-animation {
  from { width: 0; }
  to { width: var(--bar-width); }
}

@media only screen and (max-width: 767px) { 
  .sf-donate a.button:not(.secondary) { margin-bottom: 10px; }
}

Result

See the Pen Donation Widget with Progress Bar by Snippflow (@snippflow) on CodePen.

Extras

Tips

• Keep table complexity to a minimum for faster loading.
• Test responsiveness regularly to ensure usability.
• Use clear text for easy reading.