A lightweight and customizable Reading Progress Bar plugin for Publii.
This plugin adds a smooth, responsive progress indicator at the top of your posts, showing readers how far they’ve scrolled through an article.
This Plugin is in no way affiliated with Publii and is developed independently by the developer, the name Publii in this file is only used to indicate that the plugin is made to be used in Publii App.
- Adjustable bar height (1–50px)
- Beautiful gradient color customization (start & end)
- Optional shadow for depth
- Custom content selector support
- Option to enable in Preview Mode
- Simple, fast, and works on all posts automatically
- Open Publii.
- Go to Menu → Plugins.
- Click Add New Plugin.
- Select the downloaded ZIP file (
readingProgressBar.zip). - Click Install.
- Extract the plugin ZIP file.
- Copy the entire folder named
readingProgressBarto: [Your Publii Site Directory]/plugins/ - Restart Publii and enable the plugin from the Plugins section.
Once installed and activated:
- Open Plugin Settings.
- Adjust height, gradient colors, and shadow as desired.
- (Optional) Change the Content Selector if your theme uses a different post content class.
- Save and republish your site to see the progress bar in action.
| Setting | Description | Default |
|---|---|---|
| Progress Bar Height (px) | Controls the bar thickness | 5 |
| Gradient Start Color | Starting color of the bar | #00c6ff |
| Gradient End Color | Ending color of the bar | #0072ff |
| Shadow Color | Optional shadow below bar | #00c6ff |
| Content Selector | Main content container | .content__entry |
| Enable in Preview Mode | Show progress bar in preview | false |
readingProgressBar/ ├── plugin.json ├── main.js ├── thumbnail.svg └── LICENSE
Pull requests and feature suggestions are always welcome!
If you find a bug or have an idea for improvement, open an issue.
Licensed under the GNU General Public License v3.0.
See LICENSE for details.
- Initial release 🎉