There is something powerful about watching a progress bar fill up.

It does not matter if it is a loading screen, a fundraising goal, or a coffee loyalty card. Something in our brain just loves seeing progress happen in real time. It feels good. It feels motivating. It makes you want to push it to 100%.

That is exactly the feeling Donate Bar brings to your website.

What Is Donate Bar

Donate Bar is a YOOtheme Pro element — one of those drag-and-drop building blocks you place on your page — that displays a beautiful animated progress bar showing how close you are to a donation goal. Or any goal really. Funding targets, crowdfunding campaigns, community milestones — if it has a number and a target, Donate Bar can show it.

You set your goal amount and your raised amount, and the plugin does the math for you automatically. No calculator needed. No manually updating percentages. Just enter the numbers and watch the bar do its thing.

Three Bar Styles Because One Was Not Enough

This is where it gets fun.

Donate Bar comes with three completely different layouts and you pick whichever one fits your design best.

Horizontal — The classic. Fills from left to right, configurable thickness and corner radius. Clean, familiar, universally understood.

Vertical — Fills from bottom to top. Great for sidebars or tall layout sections where a horizontal bar would feel out of place. You control the thickness, corner radius, and total height in pixels.

Circular — An SVG ring — which is just a fancy way of saying a round progress circle drawn with code — that fills clockwise from the top. You control the diameter and stroke width. It looks absolutely gorgeous on a campaign page and honestly just makes people stop scrolling for a second.

It Animates. Beautifully.

When a visitor scrolls down to your Donate Bar, it does not just sit there. It animates from zero to your current percentage right in front of their eyes. You can set the speed and the easing curve — easing just means how the animation accelerates and decelerates, so it can feel smooth, snappy, bouncy, or springy depending on your vibe.

And if you really want to grab attention, you can put the bar in ping-pong mode — where it loops back and forth between zero and your target percentage continuously. It is eye-catching in the best possible way.

There is also a tip marker — a little indicator that rides along the leading edge of the bar as it fills — and you can give it its own animation too. A bounce, a spin, a back-and-forth slide. It is a small detail but it makes the whole thing feel alive.

You Can Put Images On It Too

Yes really.

You can place an icon or uploaded image at the start of the bar, at the end of the bar, and right on the tip marker that travels with the fill. Every image has its own size controls and X/Y offset — meaning you can nudge it left, right, up, or down by exact pixel amounts until it sits exactly where you want it.

It sounds like a small thing until you put a little heart icon at the start and a trophy at the end and suddenly your donation bar has a whole personality.

Free To Start, More When You Are Ready

Donate Bar works on a freemium model. That means you can install it, use it, and put it on your website completely for free. The core bar is yours, no strings attached.

When you are ready for the extra animations, advanced controls, and all the bells and whistles — that is where the paid extras come in. You grow into it at your own pace.

Because a good donation bar should not be out of reach for someone just starting out. Everyone deserves to show their supporters how far they have come.

And honestly, watching that bar fill up never gets old.