{"id":233579,"date":"2025-05-21T20:32:27","date_gmt":"2025-05-21T20:32:27","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/circle-progress-bar-shafayat-hossain\/"},"modified":"2025-05-21T20:38:06","modified_gmt":"2025-05-21T20:38:06","slug":"circle-progress-bar-shafayat-hossain","status":"publish","type":"plugin","link":"https:\/\/it.wordpress.org\/plugins\/circle-progress-bar-shafayat-hossain\/","author":23291898,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.0","stable_tag":"1.0.0","tested":"6.8.5","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"Circle Progress Bar Block","header_author":"Shafayat Hossain","header_description":"A customizable circle progress bar block for displaying progress, statistics, or metrics.","assets_banners_color":"002538","last_updated":"2025-05-21 20:38:06","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/profiles.wordpress.org\/jqsafi","header_plugin_uri":"","header_author_uri":"https:\/\/jqsafi.github.io","rating":0,"author_block_rating":0,"active_installs":20,"downloads":530,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"jqsafi","date":"2025-05-21 20:38:06"}},"upgrade_notice":{"1.0.0":"<p>Initial release of Circle Progress Bar Block. Includes all core features with full block editor integration.<\/p>"},"ratings":[],"assets_icons":{"icon-128X128.png":{"filename":"icon-128X128.png","revision":3298311,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3298311,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":3298311,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":{"circle-progress-bar\/progress":{"apiVersion":2,"name":"circle-progress-bar\/progress","title":"Circle Progress Bar","category":"widgets","icon":"chart-pie","keywords":["progress","circle","bar","chart","statistics"],"version":"1.0.0","textdomain":"circle-progress-bar","supports":{"html":false,"anchor":true,"customClassName":true,"align":true},"description":"Add beautiful circular progress indicators to your content.","editorScript":"file:.\/build\/index.js","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"}}}},"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3298311,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3298311,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3298311,"resolution":"3","location":"assets","locale":""},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3298311,"resolution":"4","location":"assets","locale":""},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3298311,"resolution":"5","location":"assets","locale":""}},"screenshots":{"1":"Circle Progress Bar showing percentage with custom text","2":"Block settings panel with all customization options","3":"Multiple progress bars with different styles and colors","4":"Progress bar with gradient effect enabled","5":"Dark theme compatibility view"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[148857,6780,148076,9340,9351],"plugin_category":[],"plugin_contributors":[242637],"plugin_business_model":[],"class_list":["post-233579","plugin","type-plugin","status-publish","hentry","plugin_tags-block-editor","plugin_tags-circle","plugin_tags-gutenberg","plugin_tags-progress","plugin_tags-progress-bar","plugin_contributors-jqsafi","plugin_committers-jqsafi"],"banners":{"banner":"https:\/\/ps.w.org\/circle-progress-bar-shafayat-hossain\/assets\/banner-772x250.jpg?rev=3298311","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/circle-progress-bar-shafayat-hossain\/assets\/icon-128X128.png?rev=3298311","icon_2x":"https:\/\/ps.w.org\/circle-progress-bar-shafayat-hossain\/assets\/icon-256x256.png?rev=3298311","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/circle-progress-bar-shafayat-hossain\/assets\/screenshot-1.png?rev=3298311","caption":"Circle Progress Bar showing percentage with custom text"},{"src":"https:\/\/ps.w.org\/circle-progress-bar-shafayat-hossain\/assets\/screenshot-2.png?rev=3298311","caption":"Block settings panel with all customization options"},{"src":"https:\/\/ps.w.org\/circle-progress-bar-shafayat-hossain\/assets\/screenshot-3.png?rev=3298311","caption":"Multiple progress bars with different styles and colors"},{"src":"https:\/\/ps.w.org\/circle-progress-bar-shafayat-hossain\/assets\/screenshot-4.png?rev=3298311","caption":"Progress bar with gradient effect enabled"},{"src":"https:\/\/ps.w.org\/circle-progress-bar-shafayat-hossain\/assets\/screenshot-5.png?rev=3298311","caption":"Dark theme compatibility view"}],"raw_content":"<!--section=description-->\n<p>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.<\/p>\n\n<h3>Source Code<\/h3>\n\n<p>All uncompiled source code is included in this plugin. The production code in <code>build\/index.js<\/code> is compiled from:<\/p>\n\n<h4>Main Source File<\/h4>\n\n<p>Located at <code>src\/index.js<\/code>, this is the complete React source code for the block:<\/p>\n\n<pre><code>`javascript\n<\/code><\/pre>\n\n<p>import { registerBlockType } from '@wordpress\/blocks';\nimport { InspectorControls } from '@wordpress\/block-editor';\nimport {\n    PanelBody,\n    RangeControl,\n    ColorPicker,\n    TextControl,\n    SelectControl,\n} from '@wordpress\/components';<\/p>\n\n<p>registerBlockType('circle-progress-bar\/progress', {\n    title: 'Circle Progress Bar',\n    icon: 'chart-pie',\n    category: 'widgets',\n    description: 'A customizable circle progress bar.',\n    keywords: ['progress', 'circle', 'chart'],\n    supports: { html: false },\n    attributes: {\n        percentage: { type: 'number', default: 75 },\n        size: { type: 'number', default: 100 },\n        strokeColor: { type: 'string', default: '#00aaff' },\n        bgColor: { type: 'string', default: '#e6e6e6' },\n        text: { type: 'string', default: 'Progress' },\n        useShadow: { type: 'boolean', default: false },\n        useGradient: { type: 'boolean', default: false },\n        strokeWidth: { type: 'number', default: 10 },\n        fontSize: { type: 'number', default: 20 },\n        fontColor: { type: 'string', default: '#333' }\n    },<\/p>\n\n<pre><code>\/\/ Full source code available in src\/index.js\n\/\/ See GitHub repository for complete implementation\n<\/code><\/pre>\n\n<p>});\n    <code><\/code><\/p>\n\n<h4>Build Tools<\/h4>\n\n<p>The production code is generated using standard WordPress tools:\n* <code>@wordpress\/scripts<\/code> - For development and build\n* Webpack - For module bundling\n* Babel - For modern JavaScript compatibility<\/p>\n\n<h4>Building from Source<\/h4>\n\n<ol>\n<li>The source is in <code>src\/index.js<\/code><\/li>\n<li>Build tools are configured in <code>package.json<\/code><\/li>\n<li>To compile:\n   <code>bash\nnpm install\nnpm run build<\/code><\/li>\n<li>Output goes to <code>build\/index.js<\/code><\/li>\n<\/ol>\n\n<h4>Directory Structure<\/h4>\n\n<p>To work with the source code:\n1. Clone the GitHub repository: <a href=\"https:\/\/github.com\/jqsafi\/circle-progress-bar\">https:\/\/github.com\/jqsafi\/circle-progress-bar<\/a>\n2. Install dependencies: <code>npm install<\/code>\n3. Start development server: <code>npm start<\/code>\n4. Build production version: <code>npm run build<\/code><\/p>\n\n<h4>Features<\/h4>\n\n<ul>\n<li><p><strong>Fully Customizable Design<\/strong><\/p>\n\n<ul>\n<li>Adjustable circle size and stroke width<\/li>\n<li>Custom colors for progress bar, background, and text<\/li>\n<li>Optional gradient effects<\/li>\n<li>Configurable font size and text<\/li>\n<li>Shadow effects available<\/li>\n<\/ul><\/li>\n<li><p><strong>Block Editor Integration<\/strong><\/p>\n\n<ul>\n<li>Easy to use block controls<\/li>\n<li>Live preview in editor<\/li>\n<li>Works with Full Site Editing (FSE)<\/li>\n<li>Multiple instances support<\/li>\n<\/ul><\/li>\n<li><p><strong>Performance Optimized<\/strong><\/p>\n\n<ul>\n<li>Lightweight SVG-based rendering<\/li>\n<li>No external dependencies<\/li>\n<li>Optimized for modern browsers<\/li>\n<\/ul><\/li>\n<\/ul>\n\n<h3>Usage<\/h3>\n\n<h4>Basic Configuration<\/h4>\n\n<ol>\n<li>After adding the block, set your desired percentage (0-100) in the block settings panel<\/li>\n<li>Customize the appearance:\n\n<ul>\n<li>Change circle size using the \"Size\" slider<\/li>\n<li>Adjust stroke width using the \"Thickness\" slider<\/li>\n<li>Set colors for the progress bar, background, and text<\/li>\n<li>Enable\/disable gradient effect<\/li>\n<li>Add custom text above or below the percentage<\/li>\n<\/ul><\/li>\n<\/ol>\n\n<h4>Advanced Features<\/h4>\n\n<ul>\n<li><strong>Shadow Effects<\/strong>: Enable and customize shadow effects in the \"Effects\" panel<\/li>\n<li><strong>Text Options<\/strong>: Configure font size, weight, and position<\/li>\n<\/ul>\n\n<h3>Development<\/h3>\n\n<p>The Circle Progress Bar Block is developed using modern JavaScript and follows WordPress coding standards. The source code is available on GitHub:<\/p>\n\n<ul>\n<li>GitHub Repository: <a href=\"https:\/\/github.com\/jqsafi\/circle-progress-bar\">https:\/\/github.com\/jqsafi\/circle-progress-bar<\/a><\/li>\n<\/ul>\n\n<h4>Building from Source<\/h4>\n\n<ol>\n<li>Clone the repository<\/li>\n<li>Install dependencies:\n   <code>npm install<\/code><\/li>\n<li>For development with live reload:\n   <code>npm start<\/code><\/li>\n<li>For production build:\n   <code>npm run build<\/code><\/li>\n<\/ol>\n\n<p>The plugin uses the following build tools:\n* @wordpress\/scripts for development and build processes\n* webpack for bundling\n* Babel for JavaScript transpilation\n* ESLint and Prettier for code formatting<\/p>\n\n<p>Source files are located in:\n* <code>src\/<\/code> - Uncompiled JavaScript source code\n* <code>build\/<\/code> - Compiled and minified production code<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin folder to the <code>\/wp-content\/plugins\/<\/code> directory.<\/li>\n<li>Activate the plugin through the 'Plugins' menu in WordPress.<\/li>\n<li>In the Block Editor, click the (+) icon to add a new block<\/li>\n<li>Search for \"Circle Progress\" or find it under the \"Widgets\" category<\/li>\n<li>Add the block to your page or post<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id='is%20this%20compatible%20with%20full%20site%20editing%20%28fse%29%3F'><h3>Is this compatible with Full Site Editing (FSE)?<\/h3><\/dt>\n<dd><p>Yes, it's fully compatible with block-based themes and Full Site Editing.<\/p><\/dd>\n<dt id='can%20i%20use%20multiple%20progress%20bars%20with%20different%20styles%3F'><h3>Can I use multiple progress bars with different styles?<\/h3><\/dt>\n<dd><p>Yes, you can add multiple instances of the block, each with its own unique settings for colors, size, and animation.<\/p><\/dd>\n<dt id='does%20it%20work%20with%20all%20modern%20browsers%3F'><h3>Does it work with all modern browsers?<\/h3><\/dt>\n<dd><p>Yes, the plugin uses SVG which is supported by all modern browsers. It's tested and works perfectly with Chrome, Firefox, Safari, and Edge.<\/p><\/dd>\n<dt id='where%20can%20i%20find%20the%20source%20code%3F'><h3>Where can I find the source code?<\/h3><\/dt>\n<dd><p>The uncompiled source code is included in the <code>src<\/code> 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 <a href=\"https:\/\/github.com\/jqsafi\/circle-progress-bar\">https:\/\/github.com\/jqsafi\/circle-progress-bar<\/a>.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release with full customization<\/li>\n<\/ul>","raw_excerpt":"A customizable circle progress bar Gutenberg block for displaying progress, statistics, or metrics in a visually appealing way.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/233579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=233579"}],"author":[{"embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/jqsafi"}],"wp:attachment":[{"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=233579"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=233579"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=233579"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=233579"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=233579"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=233579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}