
CSS Alert Message Boxes
January 13, 2025
Accordion with Expand/Collapse Status Icon
January 27, 2025
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.
Summary
A Donation Widget with a Progress Bar is an engaging and effective way to boost contributions, offering both functionality and visual appeal to your fundraising campaigns.