Site & theme widget
Reading Progress
A thin bar at the top of the screen that fills as visitors read.
Build it with your AI
“Add a thin reading progress bar at the top of blog posts in our accent color.”
Live demo
See it working
Scroll this page: the thin bar at the very top of the window is this widget.
Settings
8 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
3 settings
Reading progress
Position
Measure
CSS ID
Design
5 settings
Bar
Height
Bar color
Track color
Distance from the edge
Rounded end
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Reading Progress settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add a thin reading progress bar at the top of blog posts in our accent color.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{ "type": "reading-progress", "settings": { } }More site & theme widgets
Works well with
Archive Description
The description of the category, tag or author being viewed, for archive templates.
Archive Title
The name of the category, tag or search being viewed — without the “Category:” prefix if you like.
Author Box
The author of a post with photo, name, bio and links, at the end of every article.
Featured Image
The post’s featured image, cropped to any ratio, with a fallback for posts without one.
Language Switcher
Links to the other languages of a page on WPML and Polylang sites.
Loop Filter
Category pills, dropdowns or a search box that filter a grid of posts without reloading the page.