How to Add Percentage Animation in WordPress

September 29, 2024

Percentage animation bar always looks smarter than text. If you ever want to add percentage animation to your WordPress site of yours then you can do it easily by installing a plugin. You won’t have to write hundreds of lines of code, just give a couple of minutes. Then, you will be able to add percentage animation in your website.

There are a couple of plugins available to do this. But I recommend using Ultimate Blocks as it provides you the benefits of other blocks and customizations. All right, let’s do it.

Adding the Percentage Animation in WordPress

For adding a percentage animation, I am going to take the help of the Ultimate Blocks Plugin. It provides you with 20+ amazing blocks and lets you do more than the default Gutenberg.

Step 1: Install the Ultimate Blocks Plugin

First, you need to install the Ultimate Blocks plugin. Just go to WordPress Dashboard > Plugins > Add New and search for Ultimate Blocks. Then, install and activate the plugin.

Step 2: Add the ‘Progress Bar’ Block

Now open a page or post where you want to add percentage animation. Then click on + sign to add a new block and search for ‘Progress Bar’. Insert it by clicking on it.

You will get a horizontal progress bar like this –

Step 3: Customize Percentage & Other Settings

You can change the percentage from the toolbar.

If you like to customize more open the block option.

From here, you will be able to show/hide the stripe, percentage number and change the percentage position.

Change Style: If you want to change the style, open block settings and toggle to ‘Styles’.

From here, you will be able to change the style to a circle and a half circle. If you wish, you can also alter the thickness, size and color from here.

If you wish to add multiple percentage animation then insert a column and add percentage animation.

Ultimate Blocks is free, but if you like to do more than free purchase the pro version. Pro version provides you with more advanced options like animation, visibility control, content search, highlight option, etc.

To purchase the pro version, navigate to the pricing page of Ultimate Blocks and buy the plugin.

Learn: How to Install & Activate Ultimate Blocks Pro

Final Words

I hope now you will be able to add percentage animation in WordPress very easily. If you wish you can use other plugins, but it is not recommended to install any plugins on your WordPress website unless you know about those.

Changelog

Updated on 2024-09-29 (Uzzal Raz Bongshi)
- Updated Images.
- Updated details of the method.

Written by:

Uzzal Raz Bongshi

Uzzal Raz Bongshi is a seasoned content writer with six years of experience, excelling in research, SEO, and tailoring content to diverse audiences. Passionate about storytelling, he constantly seeks to learn and create content that resonates deeply with readers. Outside of writing, he enjoys reading, playing outdoor games, and helping others.

One Plugin To Replace Them All