Title: Circle Progress Bar Block Author: Shafayat Hossain Published: Mee 21, 2025 Last modified: Mee 21, 2025 --- Search plugins ![](https://ps.w.org/circle-progress-bar-shafayat-hossain/assets/banner-772x250. jpg?rev=3298311) This plugin **hasn’t been tested with the latest 3 major releases of WordPress**. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. ![](https://ps.w.org/circle-progress-bar-shafayat-hossain/assets/icon-256x256.png? rev=3298311) # Circle Progress Bar Block By [Shafayat Hossain](https://profiles.wordpress.org/jqsafi/) [Download](https://downloads.wordpress.org/plugin/circle-progress-bar-shafayat-hossain.1.0.0.zip) * [Details](https://rhg.wordpress.org/plugins/circle-progress-bar-shafayat-hossain/#description) * [Reviews](https://rhg.wordpress.org/plugins/circle-progress-bar-shafayat-hossain/#reviews) * [Installation](https://rhg.wordpress.org/plugins/circle-progress-bar-shafayat-hossain/#installation) * [Development](https://rhg.wordpress.org/plugins/circle-progress-bar-shafayat-hossain/#developers) [Support](https://wordpress.org/support/plugin/circle-progress-bar-shafayat-hossain/) ## Description 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 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](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: 3. * 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](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 ## Screenshots [⌊Circle Progress Bar showing percentage with custom text⌉⌊Circle Progress Bar showing percentage with custom text⌉[ Circle Progress Bar showing percentage with custom text [⌊Block settings panel with all customization options⌉⌊Block settings panel with all customization options⌉[ Block settings panel with all customization options [⌊Multiple progress bars with different styles and colors⌉⌊Multiple progress bars with different styles and colors⌉[ Multiple progress bars with different styles and colors [⌊Progress bar with gradient effect enabled⌉⌊Progress bar with gradient effect enabled⌉[ Progress bar with gradient effect enabled [⌊Dark theme compatibility view⌉⌊Dark theme compatibility view⌉[ Dark theme compatibility view ## Blocks This plugin provides 1 block. * Circle Progress Bar Add beautiful circular progress indicators to your content. ## Installation 1. Upload the plugin folder to the `/wp-content/plugins/` directory. 2. Activate the plugin through the ‘Plugins’ menu in WordPress. 3. In the Block Editor, click the (+) icon to add a new block 4. Search for “Circle Progress” or find it under the “Widgets” category 5. Add the block to your page or post ## FAQ ### Is this compatible with Full Site Editing (FSE)? Yes, it’s fully compatible with block-based themes and Full Site Editing. ### Can I use multiple progress bars with different styles? Yes, you can add multiple instances of the block, each with its own unique settings for colors, size, and animation. ### Does it work with all modern browsers? Yes, the plugin uses SVG which is supported by all modern browsers. It’s tested and works perfectly with Chrome, Firefox, Safari, and Edge. ### Where can I find the source code? The uncompiled source code is included in the `src` directory of this plugin and documented in the Source Code section at the top of this readme. You can also find it on GitHub at [https://github.com/jqsafi/circle-progress-bar](https://github.com/jqsafi/circle-progress-bar). ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Circle Progress Bar Block” is open source software. The following people have contributed to this plugin. Contributors * [ Shafayat Hossain ](https://profiles.wordpress.org/jqsafi/) [Translate “Circle Progress Bar Block” into your language.](https://translate.wordpress.org/projects/wp-plugins/circle-progress-bar-shafayat-hossain) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/circle-progress-bar-shafayat-hossain/), check out the [SVN repository](https://plugins.svn.wordpress.org/circle-progress-bar-shafayat-hossain/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/circle-progress-bar-shafayat-hossain/) by [RSS](https://plugins.trac.wordpress.org/log/circle-progress-bar-shafayat-hossain/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.0 * Initial release with full customization ## Meta * Version **1.0.0** * Last updated **1 bosór óll ago** * Active installations **30+** * WordPress version ** 6.0 or higher ** * Tested up to **6.8.11** * PHP version ** 7.4 or higher ** * Language * [English (US)](https://wordpress.org/plugins/circle-progress-bar-shafayat-hossain/) * Tags * [block-editor](https://rhg.wordpress.org/plugins/tags/block-editor/)[circle](https://rhg.wordpress.org/plugins/tags/circle/) [gutenberg](https://rhg.wordpress.org/plugins/tags/gutenberg/)[progress](https://rhg.wordpress.org/plugins/tags/progress/) [progress bar](https://rhg.wordpress.org/plugins/tags/progress-bar/) * [Advanced View](https://rhg.wordpress.org/plugins/circle-progress-bar-shafayat-hossain/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/circle-progress-bar-shafayat-hossain/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/circle-progress-bar-shafayat-hossain/reviews/) ## Contributors * [ Shafayat Hossain ](https://profiles.wordpress.org/jqsafi/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/circle-progress-bar-shafayat-hossain/) ## Donate Would you like to support the advancement of this plugin? [ Donate to this plugin ](https://profiles.wordpress.org/jqsafi)