Circle Progress Bar Block for WordPress Plugin Directory

Circle Progress Bar Block is a modern Gutenberg block plugin that adds beautiful circular progress indicators to your WordPress site. Perfect for displaying progress, statistics, or metrics in a visually appealing way.

Source Code All uncompiled source code is included in this plugin. The production code in build/index.js is compiled from:

Main Source File Located at src/index.js, this is the complete React source code for the block:

`javascript

import { registerBlockType } from ‘@wordpress/blocks’;

import { InspectorControls } from ‘@wordpress/block-editor’;

import {

PanelBody,

RangeControl,

ColorPicker,

TextControl,

SelectControl,

} from ‘@wordpress/components’;

registerBlockType(‘circle-progress-bar/progress’, {

title: ‘Circle Progress Bar’,

icon: ‘chart-pie’,

category: ‘widgets’,

description: ‘A customizable circle progress bar.’,

keywords: [‘progress’, ‘circle’, ‘chart’],

supports: { html: false },

attributes: {

percentage: { type: ‘number’, default: 75 },

size: { type: ‘number’, default: 100 },

strokeColor: { type: ‘string’, default: ‘#00aaff’ },

bgColor: { type: ‘string’, default: ‘#e6e6e6’ },

text: { type: ‘string’, default: ‘Progress’ },

useShadow: { type: ‘boolean’, default: false },

useGradient: { type: ‘boolean’, default: false },

strokeWidth: { type: ‘number’, default: 10 },

fontSize: { type: ‘number’, default: 20 },

fontColor: { type: ‘string’, default: ‘#333’ }

},

// Full source code available in src/index.js // See GitHub repository for complete implementation

});

Build Tools The production code is generated using standard WordPress tools:

* @wordpress/scripts – For development and build

* Webpack – For module bundling

* Babel – For modern JavaScript compatibility

Building from Source

The source is in src/index.js

Build tools are configured in package.json

To compile:

bash

npm install

npm run build

Output goes to build/index.js

Directory Structure To work with the source code:

1. Clone the GitHub repository: https://github.com/jqsafi/circle-progress-bar

2. Install dependencies: npm install

3. Start development server: npm start

4. Build production version: npm run build

Features

Fully Customizable Design

Adjustable circle size and stroke width

Custom colors for progress bar, background, and text

Optional gradient effects

Configurable font size and text

Shadow effects available

Block Editor Integration

Easy to use block controls

Live preview in editor

Works with Full Site Editing (FSE)

Multiple instances support

Performance Optimized

Lightweight SVG-based rendering

No external dependencies

Optimized for modern browsers

Usage Basic Configuration

After adding the block, set your desired percentage (0-100) in the block settings panel

Customize the appearance:

Change circle size using the “Size” slider

Adjust stroke width using the “Thickness” slider

Set colors for the progress bar, background, and text

Enable/disable gradient effect

Add custom text above or below the percentage

Advanced Features

Shadow Effects: Enable and customize shadow effects in the “Effects” panel

Text Options: Configure font size, weight, and position

Development The Circle Progress Bar Block is developed using modern JavaScript and follows WordPress coding standards. The source code is available on GitHub:

GitHub Repository: https://github.com/jqsafi/circle-progress-bar

Building from Source

Clone the repository

Install dependencies:

npm install

For development with live reload:

npm start

For production build:

npm run build

The plugin uses the following build tools:

* @wordpress/scripts for development and build processes

* webpack for bundling

* Babel for JavaScript transpilation

* ESLint and Prettier for code formatting

Source files are located in:

* src/ – Uncompiled JavaScript source code

* build/ – Compiled and minified production code