Team Tiles

<p>A quick and simple way to add progress bars to your website.</p>


Tiles Progress Block

Add a progress bar block to your Gutenberg built website with the Tiles Progress Bar block.

Shafayat Hossain

<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>
<h3>Source Code</h3>
<p>All uncompiled source code is included in this plugin. The production code in <code>build/index.js</code> is compiled from:</p>
<h4>Main Source File</h4>
<p>Located at <code>src/index.js</code>, this is the complete React source code for the block:</p>
<pre><code>`javascript
</code></pre>
<p>import { registerBlockType } from ‘@wordpress/blocks’;<br />
import { InspectorControls } from ‘@wordpress/block-editor’;<br />
import {<br />
    PanelBody,<br />
    RangeControl,<br />
    ColorPicker,<br />
    TextControl,<br />
    SelectControl,<br />
} from ‘@wordpress/components’;</p>
<p>registerBlockType(‘circle-progress-bar/progress’, {<br />
    title: ‘Circle Progress Bar’,<br />
    icon: ‘chart-pie’,<br />
    category: ‘widgets’,<br />
    description: ‘A customizable circle progress bar.’,<br />
    keywords: [‘progress’, ‘circle’, ‘chart’],<br />
    supports: { html: false },<br />
    attributes: {<br />
        percentage: { type: ‘number’, default: 75 },<br />
        size: { type: ‘number’, default: 100 },<br />
        strokeColor: { type: ‘string’, default: ‘#00aaff’ },<br />
        bgColor: { type: ‘string’, default: ‘#e6e6e6’ },<br />
        text: { type: ‘string’, default: ‘Progress’ },<br />
        useShadow: { type: ‘boolean’, default: false },<br />
        useGradient: { type: ‘boolean’, default: false },<br />
        strokeWidth: { type: ‘number’, default: 10 },<br />
        fontSize: { type: ‘number’, default: 20 },<br />
        fontColor: { type: ‘string’, default: ‘#333’ }<br />
    },</p>
<pre><code>// Full source code available in src/index.js
// See GitHub repository for complete implementation
</code></pre>
<p>});<br />
    <code></code></p>
<h4>Build Tools</h4>
<p>The production code is generated using standard WordPress tools:<br />
* <code>@wordpress/scripts</code> – For development and build<br />
* Webpack – For module bundling<br />
* Babel – For modern JavaScript compatibility</p>
<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:<br />
   <code>bash<br />
npm install<br />
npm run build</code></li>
<li>Output goes to <code>build/index.js</code></li>
</ol>
<h4>Directory Structure</h4>
<p>To work with the source code:<br />
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><br />
2. Install dependencies: <code>npm install</code><br />
3. Start development server: <code>npm start</code><br />
4. Build production version: <code>npm run build</code></p>
<h4>Features</h4>
<ul>
<li>
<p><strong>Fully Customizable Design</strong></p>
<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>
<p><strong>Block Editor Integration</strong></p>
<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>
<p><strong>Performance Optimized</strong></p>
<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><strong>Shadow Effects</strong>: Enable and customize shadow effects in the “Effects” panel</li>
<li><strong>Text Options</strong>: Configure font size, weight, and position</li>
</ul>
<h3>Development</h3>
<p>The Circle Progress Bar Block is developed using modern JavaScript and follows WordPress coding standards. The source code is available on GitHub:</p>
<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:<br />
   <code>npm install</code></li>
<li>For development with live reload:<br />
   <code>npm start</code></li>
<li>For production build:<br />
   <code>npm run build</code></li>
</ol>
<p>The plugin uses the following build tools:<br />
* @wordpress/scripts for development and build processes<br />
* webpack for bundling<br />
* Babel for JavaScript transpilation<br />
* ESLint and Prettier for code formatting</p>
<p>Source files are located in:<br />
* <code>src/</code> – Uncompiled JavaScript source code<br />
* <code>build/</code> – Compiled and minified production code</p>


Circle Progress Bar Block

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

Tiles Progress Block vs Circle Progress Bar Block