Shafayat Hossain

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.
<h3>Source Code</h3>
All uncompiled source code is included in this plugin. The production code in <code>build/index.js</code> is compiled from:
<h4>Main Source File</h4>
Located at <code>src/index.js</code>, this is the complete React source code for the block:
<pre><code>`javascript
</code></pre>
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’ } 
 },
<pre><code>// Full source code available in src/index.js
// See GitHub repository for complete implementation
</code></pre>
}); 
 <code></code>
<h4>Build Tools</h4>
The production code is generated using standard WordPress tools: 
* <code>@wordpress/scripts</code> – For development and build 
* Webpack – For module bundling 
* Babel – For modern JavaScript compatibility
<h4>Building from Source</h4>
<ol>
<li>The source is in <code>src/index.js</code></li>
<li>Build tools are configured in <code>package.json</code></li>
<li>To compile: 
 <code>bash 
npm install 
npm run build</code></li>
<li>Output goes to <code>build/index.js</code></li>
</ol>
<h4>Directory Structure</h4>
To work with the source code: 
1. Clone the GitHub repository: <a href="https://github.com/jqsafi/circle-progress-bar" rel="nofollow ugc">https://github.com/jqsafi/circle-progress-bar</a> 
2. Install dependencies: <code>npm install</code> 
3. Start development server: <code>npm start</code> 
4. Build production version: <code>npm run build</code>
<h4>Features</h4>
<ul>
<li>
Fully Customizable Design
<ul>
<li>Adjustable circle size and stroke width</li>
<li>Custom colors for progress bar, background, and text</li>
<li>Optional gradient effects</li>
<li>Configurable font size and text</li>
<li>Shadow effects available</li>
</ul>
</li>
<li>
Block Editor Integration
<ul>
<li>Easy to use block controls</li>
<li>Live preview in editor</li>
<li>Works with Full Site Editing (FSE)</li>
<li>Multiple instances support</li>
</ul>
</li>
<li>
Performance Optimized
<ul>
<li>Lightweight SVG-based rendering</li>
<li>No external dependencies</li>
<li>Optimized for modern browsers</li>
</ul>
</li>
</ul>
<h3>Usage</h3>
<h4>Basic Configuration</h4>
<ol>
<li>After adding the block, set your desired percentage (0-100) in the block settings panel</li>
<li>Customize the appearance:
<ul>
<li>Change circle size using the “Size” slider</li>
<li>Adjust stroke width using the “Thickness” slider</li>
<li>Set colors for the progress bar, background, and text</li>
<li>Enable/disable gradient effect</li>
<li>Add custom text above or below the percentage</li>
</ul>
</li>
</ol>
<h4>Advanced Features</h4>
<ul>
<li>Shadow Effects: Enable and customize shadow effects in the “Effects” panel</li>
<li>Text Options: Configure font size, weight, and position</li>
</ul>
<h3>Development</h3>
The Circle Progress Bar Block is developed using modern JavaScript and follows WordPress coding standards. The source code is available on GitHub:
<ul>
<li>GitHub Repository: <a href="https://github.com/jqsafi/circle-progress-bar" rel="nofollow ugc">https://github.com/jqsafi/circle-progress-bar</a></li>
</ul>
<h4>Building from Source</h4>
<ol>
<li>Clone the repository</li>
<li>Install dependencies: 
 <code>npm install</code></li>
<li>For development with live reload: 
 <code>npm start</code></li>
<li>For production build: 
 <code>npm run build</code></li>
</ol>
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: 
* <code>src/</code> – Uncompiled JavaScript source code 
* <code>build/</code> – Compiled and minified production code

Circle Progress Bar Block

A customizable circle progress bar Gutenberg block for displaying progress, statistics, or metrics in a visually appealing way.

Edel Hearts / Yabe

Circle Tag Cloud is a lightweight and customizable plugin that displays your tags (or any taxonomy) in a visually striking, packed layout. Unlike traditional tag clouds, it uses a smart JavaScript packing algorithm to arrange terms tightly within a circle or rectangle without overlapping.
It is designed with performance and accessibility in mind, featuring a built-in caching system (Transient API) and keyboard navigation support.
Key Features:
<ul>
<li>Smart Packing: Automatically arranges tags in a dense Circle or Rectangle shape.</li>
<li>Color Palettes: Choose from preset palettes (Warm, Cool, Vivid, Monochrome, Metallic Mix) or define your own Custom Colors.</li>
<li>Smart Contrast: Automatically adjusts text color (black or white) based on the background color for optimal readability.</li>
<li>Text Outline: Adds a “Glow” effect outline to text for better visibility on any color.</li>
<li>Motion Effect: Optional subtle floating animation (respects “prefers-reduced-motion” settings).</li>
<li>High Performance: Uses Transient API caching to minimize database queries.</li>
<li>Accessibility Ready: Full keyboard navigation support with tooltips that appear on focus.</li>
<li>Easy Configuration: Manage everything from a dedicated settings page or override via shortcode attributes.</li>
</ul>
Usage:
Simply add the shortcode <code>[circle_tag_cloud]</code> to any post, page, or widget.
You can also specify attributes directly in the shortcode: 
 [circle_tag_cloud taxonomy=”category” max=”30″ shape=”circle” palette=”metallic”]

Circle Tag Cloud

Displays taxonomy terms in a beautiful, highly packed circle (or rectangle) layout with customizable color palettes and motion effects.

Circle Progress Bar Block vs Circle Tag Cloud