Hey everyone 
Just released SmartLine, now live on the Elements store. Quick heads-up before the feature list: SmartLine is far more than a simple progress bar. A progress bar is just one of the things it can render. Underneath, it’s a complete scroll-tracking and section-navigation system — with configurable tracking sources, multiple marker placement strategies, three label styles, and a companion anchor component that turns any page into a live, navigable outline. A bullet list can only convey so much — do yourself a favour and check the live demo linked below before forming an opinion. That’s where SmartLine actually shows what it can do.
3 Tracking modes
SmartLine doesn’t just track page scroll. You pick what it follows:
• Full Page — classic reading-progress behavior, tracks the entire page from top to bottom
• SmartLine Anchors — tracks sections you’ve marked with the companion SmartLine Anchor component, turning SmartLine into a live table-of-contents navigator
• Custom Element — tracks any element on the page via CSS selector: the article body, a single feature section, a scrollable panel inside a page, anything
This is already a big leap over typical progress bar components, which usually track the whole page and stop there.
[screenshot: the 3 tracking modes applied to the same page]
4 Marker placement modes
Once you enable markers, SmartLine can distribute them in any of these ways:
• Every 10% / 20% / 25% / 50% — fixed percentage intervals along the tracked range
• SmartLine Anchors — one marker per anchor dropped on the page
• Heading Tags — one marker per H1 / H2 / H3 / H4 / H5 / H6 automatically detected in the tracked element
• Custom Selector — one marker per element matching a CSS selector of your choice
That means with two clicks you can turn SmartLine into a proper document outline — no manual anchor setup, the component reads the headings for you.
3 Label types, with smart content
Labels attach to markers and can be rendered in three styles:
• Static Position — sit next to each marker, always visible
• Dynamic Position — slide along with the scroll indicator, showing live values
• Tooltip on Hover — hidden by default, appear when the user hovers a marker
And the content isn’t just percentages:
• Tracking Percentage — live scroll position inside the tracked range
• Reading Time — estimated time to finish, based on a configurable words-per-minute rate
• SmartLine Anchor Labels — custom text you set on each anchor
• Heading Tag Labels — auto-extracted heading text
Show only in range
When SmartLine tracks an anchor or a custom element, it doesn’t have to stay on screen the whole time. Enable Visible Only in Tracking Range and SmartLine smoothly appears when the tracked element enters the viewport, and disappears when it leaves. Perfect for long pages where a progress indicator should only show up on the relevant section — not follow the reader everywhere.
Hover effects everywhere
The bar, the markers, and the labels each have their own hover states — colors synced across all three so the interaction feels cohesive. Combined with SmartLine’s theme integration (colors, shadows, border radii, typography), everything stays consistent with your site’s design system.
And plenty more
The above covers the headline features, but SmartLine also includes: four positions (top, bottom, left, right — so horizontal or vertical), arrow and keyboard navigation between sections, URL hash synchronization as the user scrolls, configurable smooth-scroll behavior, draggable dynamic labels, responsive dots on most properties so SmartLine reshapes per breakpoint, and a handful of smaller refinements. The best way to explore them is the live demo linked below.
Perfect for
• Long-form articles and documentation with a real table of contents (pick anchors, heading tags, or a custom selector — your call)
• Product pages where progress should show only while the user is on a specific section
• Sites and editors with scrollable panels that deserve their own progress indicator
• Any layout where “where am I on the page” deserves a proper answer, not just a thin bar at the top
Links
Live demo: SmartLine for Elements - RW Pro Space
Get SmartLine: Elements Store
The demo walks through all tracking modes, marker placements, and label styles in context, and it’s where the “much more than a progress bar” part really clicks
Happy to answer questions or take feedback here. Thanks!
— Massimo