BLACK FRIDAY: 50% OFF all Pro plans Code: BLACKFRIDAY50
Pro from $10 a year or $30 lifetime, no code needed: Code: BLACKFRIDAY50
Ends Cyber Monday, 30 Nov. Lock in the price today. Code: BLACKFRIDAY50
Get 50% Off

Reading Progress

Pro

A reading progress bar at the top or bottom of the screen and a back-to-top button with a progress ring. It comes with Bright Addons Blocks Pro, which also includes every free block.

Live demo

Where you see it

This block appears over the page (a bar, a panel, a popup or a notice), so it is not shown inside this page.

What you can set

Everything is in the block sidebar

The Reading Progress block has 3 settings panels. No code needed.

  • Progress bar

    Set show the bar, Position, Progress of, Article (CSS selector), Height (px), Round end and Percentage bubble while scrolling.

  • Back-to-top button

    Set show the button, Progress ring around the button, Inside the button, Icon, Side, Size (px), Show after scrolling (px) and Screen reader label.

  • Colors

    Set 6 color settings.

How to use it

Add it in four steps

  1. Install the plugin

    Install Bright Addons Blocks Pro from your account and activate your licence. It includes every free block.
  2. Add the block

    Open a page or post in the block editor, press +, and search for “Reading Progress”. It is in the Bright Addons Pro category.
  3. Set it up

    Open the block sidebar and work through Progress bar, Back-to-top button and Colors.
  4. Publish

    Preview the page on desktop, tablet and phone, then publish. The block loads its own CSS and JavaScript only on pages that use it.

Settings

The main settings

The full list, panel by panel, is in the Reading Progress guide.

Setting What it does Choices
Show the bar (Progress bar) On or off. –
Position (Progress bar) Choose one. Top, Bottom
Progress of (Progress bar) Choose one. The whole page, The article only
Article (CSS selector) (Progress bar) Leave empty to find the article automatically. –
Height (px) (Progress bar) From 2 to 16. –
Round end (Progress bar) On or off. –
Percentage bubble while scrolling (Progress bar) On or off. –
Show the button (Back-to-top button) On or off. –
Progress ring around the button (Back-to-top button) On or off. –
Inside the button (Back-to-top button) Choose one. Icon, Percentage, Icon, percentage on hover
Icon (Back-to-top button) Icon picker. –
Side (Back-to-top button) Choose one. Left, Right
Size (px) (Back-to-top button) From 36 to 80. –
Show after scrolling (px) (Back-to-top button) A number. –

Questions

Good to know

Is the Reading Progress block free?

Reading Progress is a Pro block. It comes with Bright Addons Blocks Pro, which has the same plans and prices as Bright Addons Pro for Elementor and includes all 62 free blocks.

Do I need Elementor for this block?

No. It is a block for the WordPress block editor (Gutenberg). Elementor is not needed. If you use Bright Addons Pro for Elementor on the same site, both plugins work side by side.

Will it slow down my pages?

No. Each block loads only its own small CSS and JavaScript, and only on pages where it is used. Blocks you do not need can be switched off in Bright Blocks.

Does it work with my theme?

Yes. The blocks work with block themes and classic themes, and follow your theme fonts. Wide and full width alignment are supported.

Bright Addons Blocks

Get every block in one plugin

Blocks Pro has all 99 Pro blocks, the 62 free blocks, Pro effects for every block, Theme Templates and popups.