Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageReading Progress Header
Editorial journal header that becomes a reading companion, built as a plain, fully editable Etch tree: header > bar (brand mark + serif wordmark + issue tag; menu holding "Nav Link" instances; a "Reading Progress" wrappe…
50 sites for €79 only, Compare all plans
The system behind it
One pattern, your whole brand.
Reading Progress Header reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.
- Type
- Layout
- Category
- Footers and headers
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 10
Set on the section, in Etch’s attributes panel. No code needed.
data-themedata-accentACSS colour for the progress fill, ring, time left, current link and drop cap
data-typeserif = editorial serif for wordmark, headlines and the mobile menu
data-positionsmart = sticky bar that hides on scroll down and returns on scroll up while the progress rail stays pinned at the top
data-widthbar width
data-densitybar height
data-ctaSubscribe button look
data-signinSign in link (wide screens and mobile sheet)
data-issueissue tag next to the wordmark
data-stagethe demo article under the bar
Component props 3
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
labelEssays
url#essays
currentFalse
showBadgeFalse
badgeNew
titleTwelve hours at sea, and what slowness gives back
labelNow reading
railchapters
railPositionbottom
thicknessregular
ringTrue
readoutboth
wpm230
swapTrue
offset240
smoothing140
targetarticle
headingsh2
actionshare
labelShare
showLabelFalse
Included in Pro From €39 a year, with all 469 patterns.
Get ProMore patterns
