Resources
Desktop app
Marketplace
Community
Developers
Wallpapers
Meetups
Company
Security
Careers
Report
Status
Legal
Blog
Creators
Program
Payouts
Experts
Awards
Events
Brand
Compare
Squarespace
Wordpress
Unbounce
Webflow
Figma
Wix
Solutions
Figma to HTML
Website builder
Portfolio maker
Landing pages
UI/UX design
No-code
Socials
Instagram
X Twitter
YouTube
LinkedIn
Threads
TikTok
    Framer
    EnterprisePricing
    Enterprise
    Pricing
    Marketplace
    TemplatesPluginsComponents
    Templates
    Plugins
    Components
    Component preview thumbnail
    MarketplaceComponents

    Scroll Progress

    Scroll UI is a responsive, customizable scroll indicator for Framer. Choose between a modern progress bar or a sleek circular ring to visualize how far users have scrolled.

    EvolveHub
    EvolveHub
    Creator
    1w ago
    Updated
    2
    Installs
    EvolveHub
    EvolveHub
    Creator
    1w ago
    Updated
    2
    Installs

    Make it with Workshop

    Build your own component with AI


    Checking Demo: Live demo

    Checking more demo site Component

    Smart Scroll UI – Scroll Progress Bar & Ring for Framer

    Smart Scroll UI is a responsive, customizable scroll indicator for Framer. Choose between a modern progress bar or a sleek circular ring to visualize how far users have scrolled. Perfect for blogs, landing pages, portfolios, or any content-heavy layout.

    Features:

    • ✅ Bar or Ring display styles

    • ✅ Clickable circular indicator (scroll to top)

    • ✅ Supports dark mode (auto-detect)

    • ✅ Scroll threshold trigger with event callback

    • ✅ Auto-hide on scroll direction

    • ✅ Fully customizable: size, color, gradient, radius, style

    • ✅ Canvas fallback for smooth Framer editing

    • ✅ Lightweight and responsive

    Use Cases:

    • Long-form articles

    • Documentation pages

    • Blog templates

    • Interactive landing pages

    • Component kits in Framer

    Built for:

    • Framer Free & Pro plans

    • Compatible with both light and dark themes

    • Zero-code designers and developers alike

    Instructions:

    1. Drag the Scroll Progress Bar code component into any Framer page.

    2. Choose Bar or Round style from the properties panel.

    3. Customize colors, position, scroll behavior, and effects.

    4. Preview to see it in action — works out of the box.

    Support
    About ComponentsRefund PolicyContact Creator

    More Components

    See All →
    Thumbnail for Interactive Cards, a Framer Marketplace template by Pixels.
    Interactive Cards
    $5
    Pixels
    Thumbnail for Confetti Rain, a Framer Marketplace template by Nabeel.
    Confetti Rain
    $9
    Nabeel
    Thumbnail for AmbiLight Video, a Framer Marketplace template by out of storage.
    AmbiLight Video
    Free
    out of storage
    Thumbnail for Apex Chart, a Framer Marketplace template by Zeroqode.
    Apex Chart
    $10
    Zeroqode
    Thumbnail for Viewport Display, a Framer Marketplace template by Framer Lists.
    Viewport Display
    Free
    Framer Lists
    Thumbnail for DottedGridBackground, a Framer Marketplace template by Caio Calderari.
    DottedGridBackground
    $10
    Caio Calderari
    Thumbnail for Fluid Distortion, a Framer Marketplace template by Johnathan B..
    Fluid Distortion
    $10
    Johnathan B.
    Thumbnail for ASCII, a Framer Marketplace template by Gia Minh.
    ASCII
    $5
    Gia Minh

    More from EvolveHub

    See All →
    Thumbnail for Lightbox Masonry , a Framer Marketplace component by EvolveHub.
    Lightbox Masonry
    component · $12
    EvolveHub
    Thumbnail for MouseWaveText, a Framer Marketplace component by EvolveHub.
    MouseWaveText
    component · $5
    EvolveHub