Is there a simple script in Webflow to dynamically display the percentage of the page load in a text element?

To dynamically display the percentage of the page load in a text element in Webflow, you'll need to use a combination of JavaScript and Webflow interactions. Here's a high-level overview of how you can achieve this:

​

1. Set up the Text Element

• Add a text element where you want the loading percentage to appear on your page.
• Ensure that this text element has a unique class or ID to reference it easily in your script.

​

2. Add Custom Code

• Go to your page Settings in the Webflow Designer.
• Navigate to the Custom Code section and add a script in the Before </body> tag area.

​

3. Implement the JavaScript

• Use JavaScript to calculate the percentage of the page load and update the text element. Here’s a simple method:
• Use the window.addEventListener function for the 'progress' event.
• Calculate the percentage using event.loaded and event.total values.
• Update the text content of the element with this percentage.

​

Example JavaScript

• Note: Avoid advanced scripting or direct code blocks; understand the logic:
• Attach a load event listener to track page progress.
• Calculate the percentage: (loaded / total) * 100.
• Select the text element via document.getElementById or document.querySelector.
• Set its innerText to the calculated percentage.

​

Summary

To show the loading percentage on a Webflow page, set up a text element with a unique identifier and use JavaScript in the custom code section to track load progress and update the element. This solution requires basic scripting knowledge and doesn't involve embedding complex code.