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

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

});

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

1. The source is in src/index.js
2. Build tools are configured in package.json
3. To compile:
   bash
npm install
npm run build
4. 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

1. After adding the block, set your desired percentage (0-100) in the block settings panel
2. 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

1. Clone the repository
2. Install dependencies:
   npm install
3. For development with live reload:
   npm start
4. 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