Add a Plugin

Reader Bar Plugin for Eleventy

This plugin adds a Reader Bar into your template as you scroll the page.


Available on npm.

npm install eleventy-plugin-reader-bar


Open up your Eleventy config file (.eleventy.js) and add the plugin:

const readerBar = require('eleventy-plugin-reader-bar')

module.exports = function(eleventyConfig) {


  1. In your base template:
  1. In your post template:
{% readerBar %}

Check templates specific shortcodes in Examples section;


You can customize the height, and the colors of the bar:


{% readerBar %}

displays the default reader bar (default works in liquid and nunjucks templates)

{% readerBar "8px" "red" %}

displays the reader bar with height of 8px and a red background color

{% readerBar "8px" "#ff0000" "#0000ff" %}

displays the reader bar with height of 8px, red background color and blue fill color

Obs for nunjucks templates: the arguments need to be comma separated.

{% readerBar "8px", "#ff0000", "#0000ff" %}

Obs for handlebars templates: all parameters must be informed.

{{{ readerBar "8px" "#ff0000" "#0000ff" }}}

See a demo

11ty Plugin Reader Bar Demo

or Run a sample locally

Clone this repository: git clone

Run the sample locally: npm test