Reading Progress Widget

Reading Progress Widget Features for Long-Form Pages

Add a scroll progress indicator to articles, documentation, guides, and landing pages. Choose what content to track, show percentage or time remaining, adjust placement, and style the widget to match your website without code.

Create Your Reading Progress Widget - It's Free!
Reading Progress Widget Features for Long-Form Pages Hero Bg Image

How to embed Reading Progress Widget to WordPress

1Get your embed code

After customizing your Jform website widget, click Try it on your website for free, and copy the generated embed code.

2Open the page editor

Go to the WordPress post or page where you want to display the widget, then add a new block.

3Add a Custom HTML block

Select Custom HTML and paste your Jform Website widget embed code into the HTML field.

4Update and view

Click Update or Publish, then open the page to check your embedded widget.

더 알아보기

Choose the Progress Indicator That Fits Your Page

Display reading progress as a top or bottom bar, a floating circle, or segmented steps. Track the full page, an article area, or a custom CSS selector so the widget follows the content readers need to finish.

Progress controls include:

BarCircleStepsCustom target
Create Your Widget
Choose the Progress Indicator That Fits Your Page

Show Percentage, Labels, and Time Remaining

Give visitors a clear reading cue with a custom label, percent-read display, and automatically estimated time remaining. Use the {{percent}} placeholder to control how progress appears in the label.

Content controls include:

Custom labelPercent readTime remaining{{percent}} placeholder
Edit the Label
Show Percentage, Labels, and Time Remaining

Match the Indicator to Your Website Style

Customize progress, track, label, percentage, and time-remaining colors. Choose a solid or gradient fill, adjust height and rounded corners, add a shadow, and use scoped custom CSS for advanced styling.

Style controls include:

Solid or gradientTrack colorLabel colors맞춤설정 CSS
Style Your Widget
Match the Indicator to Your Website Style

Control Placement and Device Visibility

Pin the indicator to the top or bottom edge, place a circle in the corner, offset sticky headers, set the progress direction, and choose whether the widget appears on desktop, mobile, or both.

Layout controls include:

Top or bottomCircle cornersEdge offsetDesktop/mobile
Set Placement
Control Placement and Device Visibility