Scroll Progress Percentage

May 13, 2024

Scroll Progress Percentage
Scroll Progress Percentage

The Framer Scroll Progress Percentage component provides a visual representation of the user's scrolling progress on the current page.

To implement the Scroll Progress Percentage component, follow these steps:

  1. Drag and drop the "Scroll Progress Percentage" component from the component list onto your canvas.

  2. Configure the following properties:

    • Button: Select the component on your canvas that you want to display the scroll progress percentage. This component should be outside the Desktop, Tablet, and Mobile breakpoints

      Breakpoint

      and it should have a "Title" property.

      Title Variable


    • Fraction Digits: Specify the number of decimal places to include in the displayed percentage value.

    • Prefix: Enter any text or symbols you want to appear before the percentage value.

    • Suffix: Enter any text or symbols you want to appear after the percentage value.

    • Transition: Choose the desired animation style for the progress percentage effect from the available Framer transitions.

With these settings, the Scroll Progress Percentage component will dynamically update and display the user's scrolling progress on the current page.

More Components

Social Share Buttons
Social Media Share Buttons

The Framer Social Media Share Buttons component allows you to share your page across various social media platforms like Twitter, LinkedIn, Instagram, Facebook, Pinterest, WhatsApp, Reddit...

Social Share Buttons
Social Media Share Buttons

The Framer Social Media Share Buttons component allows you to share your page across various social media platforms like Twitter, LinkedIn, Instagram, Facebook, Pinterest, WhatsApp, Reddit...

Download Button
Download Button

Streamline file sharing with Framer's Download Button component, allowing you to create downloadable resources for any element.

Download Button
Download Button

Streamline file sharing with Framer's Download Button component, allowing you to create downloadable resources for any element.

Before and After Image Slider
Before and After Image Slider

The Framer Before and After image slider component allows you to display two images side by side, with the ability to reveal or hide portions of each image through a slider.

Before and After Image Slider
Before and After Image Slider

The Framer Before and After image slider component allows you to display two images side by side, with the ability to reveal or hide portions of each image through a slider.

Stop Scroll
Stop Scroll

The Framer Stop Scroll component provides you with the ability to temporarily disable scrolling on your website. This feature is particularly useful when you want to showcase a preloader animation or prevent users from interacting with the page during specific events or transitions.

Stop Scroll
Stop Scroll

The Framer Stop Scroll component provides you with the ability to temporarily disable scrolling on your website. This feature is particularly useful when you want to showcase a preloader animation or prevent users from interacting with the page during specific events or transitions.