Yes, you can use a simple script in Webflow to dynamically display the percentage of the page load in a text element. Here's how you can achieve it:
Step 1: Adding a Text Element
First, add a text element to the desired location on your page where you want to display the page load percentage.
Step 2: Custom Code Component
Next, you'll need to add a Custom Code component to your Webflow project. To do this:
1. Open your project in Webflow Designer.
2. Go to the page where you want to add the page load percentage.
3. Drag and drop a Custom Code component from the Add panel (plus sign) onto your page. Place it just before the closing
tag.
Step 3: Writing the Script
Inside the Custom Code component, you'll write a script that calculates and updates the page load percentage. Here's an example script that you can use:
```javascript
```
This script listens for the `readystatechange` event. When the document's `readyState` is set to `complete`, indicating that the page has finished loading, it sets the loadPercentage text to "100%".
For the duration of the page load, a `setInterval` function is used to update the loadPercentage text every 100 milliseconds. It calculates the current percentage by dividing `document.readyState` (which can be 'loading', 'interactive', or 'complete') by 4, and then multiplying it by 100.
Step 4: Linking the Script with the Text Element
You need to link the script with the text element by assigning it an ID. In the example script above, `'loadPercentage'` is the ID of the text element. Make sure to update this ID to match the actual ID you've assigned to your text element in the Webflow Designer.
Add the ID to your text element by selecting it in the Webflow Designer, opening the Element Settings panel, and giving it a unique ID under the Settings tab.
That's it! Save your changes and publish your site. Now, when you load the page, the text element will dynamically display the percentage of the page load as it progresses.