Circle Progress Bar Block

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. js is compiled from:

Main Source File

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’,

’,

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’ }

},

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. 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