25th Jun '22
/
0 comments

Reading Progress Bar in Bricks

Reading Progress Bar in Bricks

This Pro tutorial provides the steps to implement a reading progress bar in Bricks builder.

Step 1

Add the progress element as the first child of body.

Go to Bricks → Settings → Custom code and paste the following in Body (header) scripts:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:
Bricks
Pro
Reading Progress

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.

Get access to all 630 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Sticky Header Only For Visitors in Bricks

Sticky Header Only For Visitors in Bricks

A user asked: Anyone know if its possible to make the sticky of the header conditional only for logged out users? This Pro tutorial shows…
Read more →
Categories: Bricks, Pro
Tags: Sticky Header
Pro
Stripe’s Animated Gradient in Bricks

Stripe’s Animated Gradient in Bricks

This Pro tutorial provides the steps to set up an animated gradient as a background of a section in Bricks using the code generated by…
Read more →
Categories: Bricks, Pro
Tags: Animations
Pro
Ken Burns Background Slideshow in Bricks

Ken Burns Background Slideshow in Bricks

Setting up a hero section, having images that pan and move as a background slideshow with content on top.
Read more →
Categories: Bricks, Pro
Tags: Slideshow
Pro
Click-type Infinite Scroll in Bricks Builder

Click-type Infinite Scroll in Bricks Builder

This Pro tutorial provides the steps to set up "click to load more" posts using Infinite Scroll JS in Bricks builder. Step 1 Edit your…
Read more →
Categories: Bricks, Pro
Tags: Infinite Scroll
How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

This tutorial will review how to apply multiple filters to an isotope container using the IsotopeJS library‘s features in Bricks.
Read more →
Categories: Bricks, Free, Plugins
Tags: ACF, Animations, Isotope, Query Loop
How to create filters with IsotopeJS in Bricks (Part 1)

How to create filters with IsotopeJS in Bricks (Part 1)

This tutorial series will explore the IsotopeJS library's features inside the Bricks ecosystem.
Read more →
Categories: Bricks, Free
Tags: Filters, Isotope
Pro
Fixed Sidebar Layout in Bricks

Fixed Sidebar Layout in Bricks

A user asked: This Pro tutorial provides the steps to set up a fixed left (or can be on the right) sidebar using hooks and…
Read more →
Categories: Bricks, Pro
Tags: Fixed Sidebar, Hooks, Layout
Pro
tsParticles in Bricks

tsParticles in Bricks

Updated on 5 Aug 2023 This Pro tutorial provides the steps to set up tsParticles, a lightweight TypeScript (uses JavaScript) library for creating particles as…
Read more →
Categories: Bricks, Pro
Tags: JavaScript
Pro
Inserting Random Ad Between Posts in Bricks

Inserting Random Ad Between Posts in Bricks

How to insert random ads (post type) in between regular posts on the blog page.
Read more →
Categories: Bricks, Pro
Tags: bricks/query/result