Title: Circle Progress Bar Block Author: Shafayat Hossain Published: 21 de mayo de 2025 Last modified: 21 de mayo de 2025 --- Buscar plugins ![](https://ps.w.org/circle-progress-bar-shafayat-hossain/assets/banner-772x250. jpg?rev=3298311) Este plugin **no se ha probado con las últimas 3 versiones mayores de WordPress**. Puede que ya no tenga soporte ni lo mantenga nadie, o puede que tenga problemas de compatibilidad cuando se usa con las versiones más recientes de WordPress. ![](https://ps.w.org/circle-progress-bar-shafayat-hossain/assets/icon-256x256.png? rev=3298311) # Circle Progress Bar Block Por [Shafayat Hossain](https://profiles.wordpress.org/jqsafi/) [Descargar](https://downloads.wordpress.org/plugin/circle-progress-bar-shafayat-hossain.1.0.0.zip) * [Detalles](https://es.wordpress.org/plugins/circle-progress-bar-shafayat-hossain/#description) * [Valoraciones](https://es.wordpress.org/plugins/circle-progress-bar-shafayat-hossain/#reviews) * [Instalación](https://es.wordpress.org/plugins/circle-progress-bar-shafayat-hossain/#installation) * [Desarrollo](https://es.wordpress.org/plugins/circle-progress-bar-shafayat-hossain/#developers) [Soporte](https://wordpress.org/support/plugin/circle-progress-bar-shafayat-hossain/) ## Descripción 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 ## Capturas [⌊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 ## Bloques Este plugin proporciona 1 bloque. * Circle Progress Bar Add beautiful circular progress indicators to your content. ## Instalación 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). ## Reseñas No hay valoraciones para este plugin. ## Colaboradores y desarrolladores «Circle Progress Bar Block» es un software de código abierto. Las siguientes personas han colaborado con este plugin. Colaboradores * [ Shafayat Hossain ](https://profiles.wordpress.org/jqsafi/) [Traduce «Circle Progress Bar Block» a tu idioma.](https://translate.wordpress.org/projects/wp-plugins/circle-progress-bar-shafayat-hossain) ### ¿Interesado en el desarrollo? [Revisa el código](https://plugins.trac.wordpress.org/browser/circle-progress-bar-shafayat-hossain/), echa un vistazo al [repositorio SVN](https://plugins.svn.wordpress.org/circle-progress-bar-shafayat-hossain/) o suscríbete al [registro de desarrollo](https://plugins.trac.wordpress.org/log/circle-progress-bar-shafayat-hossain/) por [RSS](https://plugins.trac.wordpress.org/log/circle-progress-bar-shafayat-hossain/?limit=100&mode=stop_on_copy&format=rss). ## Registro de cambios #### 1.0.0 * Initial release with full customization ## Meta * Versión **1.0.0** * Última actualización **hace 1 año** * Instalaciones activas **30+** * Versión de WordPress ** 6.0 o superior ** * Probado hasta **6.8.11** * Versión de PHP ** 7.4 o superior ** * Idioma * [English (US)](https://wordpress.org/plugins/circle-progress-bar-shafayat-hossain/) * Etiquetas: * [block-editor](https://es.wordpress.org/plugins/tags/block-editor/)[circle](https://es.wordpress.org/plugins/tags/circle/) [gutenberg](https://es.wordpress.org/plugins/tags/gutenberg/)[progress](https://es.wordpress.org/plugins/tags/progress/) [progress bar](https://es.wordpress.org/plugins/tags/progress-bar/) * [Vista avanzada](https://es.wordpress.org/plugins/circle-progress-bar-shafayat-hossain/advanced/) ## Valoraciones Aún no se han enviado valoraciones. [Tu valoración](https://wordpress.org/support/plugin/circle-progress-bar-shafayat-hossain/reviews/#new-post) [Ver todas las reseñas](https://wordpress.org/support/plugin/circle-progress-bar-shafayat-hossain/reviews/) ## Colaboradores * [ Shafayat Hossain ](https://profiles.wordpress.org/jqsafi/) ## Soporte ¿Tienes algo que decir? ¿Necesitas ayuda? [Ver el foro de soporte](https://wordpress.org/support/plugin/circle-progress-bar-shafayat-hossain/) ## Donar ¿Te gustaría apoyar el progreso de este plugin? [ Dona a este plugin ](https://profiles.wordpress.org/jqsafi)