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