https://github.com/peiche/progress-block

Display a progress bar with the WordPress block editor.
https://github.com/peiche/progress-block

javascript php progress progress-bar progressbar scss wordpress wordpress-plugin

Last synced: 5 months ago
JSON representation

Display a progress bar with the WordPress block editor.

• Host: GitHub
• URL: https://github.com/peiche/progress-block
• Owner: peiche
• License: gpl-2.0
• Created: 2024-03-14T14:45:36.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2026-02-01T23:00:52.000Z (5 months ago)
• Last Synced: 2026-02-02T08:51:30.896Z (5 months ago)
• Topics: javascript, php, progress, progress-bar, progressbar, scss, wordpress, wordpress-plugin
• Language: JavaScript
• Homepage:
• Size: 3.03 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# Progress Block

With this **Progress Block**, you can easily show your audience your progress! Use this plugin directly in the WordPress block editor and showcase your important statistics, data, achievements, and more.

![screenshot](./screenshot.png)

## Settings

- **Title**: Set a custom heading for your progress bar.

- **Percentage**: Set the progress with a slider, or set the number directly.

- **Colors**: Set the colors for the background and fill. Supports your theme's colors!

- **Rounded**: Turn on to give your progress bar rounded corners. Turn off to be square.

- **Height**: Set the height of your progress bar, in pixels.

- **Show Labels**: Turn on to display the title and percentage number. Turn off to hide them.

- Progress Block also supports additional style settings:

  - Text and background color (not to be confused with the progress bar's background color)

  - Font size

  - Padding and margin

## Installation

1. Download the latest version from `https://github.com/peiche/progress-block/releases`.

2. In your WordPress Dashboard, navigate to Plugins > Add New Plugin.

3. Click Upload Plugin. Choose the `progress-block.zip` file. Click Install Now.

4. Activate the plugin.

5. The Progress Block plugin is now ready to use!

## Running locally

1. Download the code or clone the repository into a local instance of WordPress. (I use [Local](https://localwp.com/).)

2. In the root level of the plugin, run `npm install`.

3. Run `npm run start` or `npm run build`.

4. Activate the plugin.

## Change log

See the [change log](https://github.com/peiche/progress-block/blob/main/CHANGELOG.md).