More Articles

Elevate Your Eleventy Articles with the Reader Bar Plugin

Take your Eleventy blog to the next level by incorporating the eleventy-plugin-reader-bar, a simple tool that adds a visually appealing and customizable Reader Bar to your site, enhancing user engagement and content consumption.

Written on Jun 18, 2024 | About 2 min reading time

New tools in your inbox every Monday!

Table of Contents

Getting Started

The Reader Bar Plugin for Eleventy is a lightweight plugin to your Eleventy articles, designed to enhance the reading experience for your visitors. By displaying a simple and customizable bar that progresses as the user scrolls through your content this plugin provides a visual cue about their reading progress, encouraging longer engagement and content consumption.

Installation

The eleventy-plugin-reader-bar is available on npm, simply run the following command to add it to your project:

npm install eleventy-plugin-reader-bar

Configuration

Once installed, open your Eleventy config file (typically called .eleventy.js) and add the plugin:


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

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(readerBar)
}

Usage

Using the Reader Bar Plugin is straightforward and can be implemented in two simple steps:

1. Base Template Setup

In your base template:

  • Create a div HTML element with the class reader-bar-start.
  • Ensure this div wraps all the elements of the page, including the header (and optionally, the footer). If not wrapped properly, the Reader Bar may appear fully filled before scrolling through the entire page.
  • To hide the Reader Bar on your base or index page, add the custom shortcode:

{% readerBar "0px" %}

2. Post/Content Template Setup

In your post or content template:

  • Add the shortcode:

{% readerBar %}
  • For template-specific shortcode examples, refer to the "Examples" section below.

Customization

The Reader Bar Plugin offers various customization options to tailor the appearance of the Reader Bar to your site's branding and preferences:

  • height: Adjust the thickness of the bar (value in pixels, default: 4px).
  • background color: Specify the color of the full-width bar (value can be a literal color name or a hexadecimal code, default: black).
  • fill color: Customize the color that fills the bar as you scroll the page (value can be a literal color name or a hexadecimal code, default: orange).
  • padding top: Control the space between the top of the screen and the bar (value in pixels, default: 2px).

Examples

Here are some examples of how to use the Reader Bar Plugin shortcode with different customization options:

  • 
    {% readerBar %}
    
    displays the default Reader Bar (works in Liquid and Nunjucks templates).
  • 
    {% readerBar "0px" %}
    
    hides the Reader Bar (use in your base template if necessary).
  • 
    {% readerBar "8px" "red" %}
    
    displays the Reader Bar with a height of 8px and a red background color.
  • 
    {% readerBar "8px" "#ff0000" "#0000ff" %}
    
    displays the Reader Bar with a height of 8px, a red background color, and a blue fill color.
  • 
    {% readerBar "8px" "#ff0000" "#0000ff" "0px" %}
    
    displays the Reader Bar as in the previous example, but with no padding top.

Note for Nunjucks templates: Arguments need to be comma-separated, e.g.,


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

Note for Handlebars templates: All parameters must be informed, e.g.,


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

See It in Action

You can see a live demo of the Reader Bar Plugin in action on the 11ty Plugin Reader Bar Demo website or check out the Github repository.

Alternatively, you can run a sample locally by cloning the repository (git clone https://www.github.com/thigoap/eleventy-plugin-reader-bar.git) and running npm test.

Elevate your Eleventy site's reading experience by incorporating the eleventy-plugin-reader-bar today! With its sleek design and customization options, you'll provide your visitors with a visually appealing and engaging way to track their reading progress, encouraging deeper content consumption and improving overall user satisfaction.

July Featured Tools

Ugly Deck

Simple straightforward pitch deck for your next project.

Explore

Smart Copy by Unbounce

Say goodbye to your copywriting woes and hello to Smart Copy. It’s the simplest way to ideate, iterate and write high-quality content that engages customers. If you need it, we can write it.

Explore

We Recommend...

Top products featured for the article.

Headcom AI

Skyrocket your quality backlink placements and save hundreds of hours with the all-in tool for your media outreach.

Explore

Luna Task

An all-in-one privacy-focused todo list, notebook, habit and mood tracker, and pomodoro timer. It remembers stuff for you and knows what to work on next. Choose from a variety of productivity techniques to get stuff actually done.

Explore

Sender

Sender empowers you to quickly and easily keep in touch with your customers and grow your business - while spending much less.

Explore

Realtime Colors

Visualize color palettes on a real website.

Explore

Sponsored

See all Tools

A Little Extra Reading

Feel like reading more? Here are some extra articles to check out!

See all Articles