Bar Counter

The Bar Counter Block is a free block that lets you display progress or percentage values in an attractive bar format. It offers multiple layouts, customizable titles, and animated stripe effects to make your data stand out. You can easily style the bar’s colors, background, and borders to match your website’s design.

Adding the block

To add the block:

1. Click the “+” button to add a new block.
2. Search for “Bar Counter” and select it.
3. For detailed instructions on how to add blocks in Gutenberg, please refer to the official WordPress Block Editor documentation.

General settings

Configuration

• Layout
  Choose between Layout 1 and Layout 2 to change the overall look of the bar counter.
• Title
  Enter a custom title (e.g. WPMozo Title) that appears above or along with the bar.
• Percentage
  Set the progress value in percentage (e.g. 50%) to visually fill the bar accordingly.
• Display Empty Bar/Chunks
  Enable this to show the empty portion of the bar as background chunks.
• Use Stripes
  Adds diagonal stripes inside the filled bar.
  • Enable Stripe Animation
    Animate the stripes for a moving effect inside the bar.
• Animation Speed
  Adjust the speed of the stripe animation.

Design settings

Title
Customize the text style for the bar title (font, size, color, etc.).

Percentage
Style the percentage text displayed on the bar.

Filled Bar/Chunks Background
Set the background for the filled portion of the bar.

• Background Type: Choose Classic (solid color) or Gradient.
• Color / Background Color: Pick the fill color or gradient.

Bar/Chunks Background
Style the empty portion of the bar.

• Background Type: Choose Classic or Gradient.
• Color / Background Color: Set the background color or gradient.

Bar/Chunks Border
Add and customize a border around the bar.

• Border: Enable and set border color and width (in px).
• Radius: Adjust the border radius (in px) to create rounded corners.