How to Add Progress Bars and Counters

This article shows you how to add progress bars and counters to your WordPress website.

Using the Block Editor (Gutenberg)

WordPress has built-in blocks that can create simple progress displays:

1. Log into your WordPress admin dashboard
2. Edit the page where you want to add the progress bar
3. Click the + button to add a new block
4. Search for "Progress Bar" or look under the Design section
5. If available, select the Progress Bar block
6. Set your percentage value and customise the colours
7. Add a label if needed
8. Click "Update" to save your changes

Note: Not all WordPress themes include progress bar blocks. If you don't see this option, move to the plugin method below.

Using Page Builder Plugins

Most page builders include progress bars and counters as standard elements:

Elementor

1. Open your page in Elementor editor
2. Search for "Progress Bar" in the widgets panel
3. Drag the Progress Bar widget to your page
4. Set the percentage, title, and colours in the left panel
5. For counters, search for "Counter" widget instead
6. Set your target number and animation duration
7. Click "Update" to publish

Other Page Builders

Similar steps apply to Beaver Builder, Divi, and other page builders. Look for "Progress", "Counter", or "Statistics" widgets.

Using Dedicated Plugins

For more advanced features, install a specialised plugin:

1. Go to Plugins → Add New in your WordPress admin
2. Search for "progress bar" or "counter"
3. Popular options include:
   • Ultimate Blocks (includes progress bar)
   • WP Statistics Counter
   • Progressive Web Apps
4. Install and activate your chosen plugin
5. Follow the plugin's setup instructions
6. Most plugins add new blocks to your editor or provide shortcodes

Adding Statistics and Data

Progress bars work well for showing:

• Business achievements ("95% customer satisfaction")
• Skills or expertise levels
• Project completion status
• Survey results
• Company milestones

Counters are ideal for:

• Years in business
• Number of customers served
• Projects completed
• Team members

Styling Your Progress Bars

To match your website's design:

1. Use your brand colours for the progress bar fill
2. Keep the background colour subtle (light grey works well)
3. Choose readable fonts for labels
4. Set appropriate animation speeds (2-3 seconds is usually good)
5. Test on mobile devices to ensure they display properly

For custom styling, you can add custom CSS to fine-tune the appearance.

Best Practices

• Use real, honest data in your progress bars and counters
• Don't overuse animated elements – they can slow down your site
• Test the animation triggers (most activate when users scroll to them)
• Keep labels short and clear
• Ensure good colour contrast for accessibility
• Group related statistics together for better visual impact

If you're still stuck with adding progress bars or counters, contact Web60 support for help with your specific setup.

FAQ

Q: Do progress bars slow down my website?

A: Simple progress bars have minimal impact on site speed. Avoid too many animated elements on one page and choose lightweight plugins.

Q: Can I add progress bars without plugins?

A: Yes, if your theme includes progress bar blocks or if you're comfortable adding custom HTML and CSS code. Plugins are easier for beginners.

Q: How do I make counters count up automatically?

A: Most counter plugins include animation settings where you can enable "count up" effects that trigger when visitors scroll to that section.

Q: What's the difference between progress bars and counters?

A: Progress bars show percentages or completion levels with a visual bar. Counters display numbers that animate from zero to your target figure.

Q: Can I use progress bars in my sidebar or footer?

A: Yes, most progress bar plugins work in widget areas like sidebars and footers, not just in page content.

Q: Do progress bars work on mobile devices?

A: Yes, but test them on your phone to ensure they display properly. Some animations may be reduced on mobile for better performance.

Q: How often should I update the numbers in my counters?

A: Update counters when the numbers change significantly or at least annually to keep your website information current and trustworthy.