Is there a simple script in Webflow to dynamically display the percentage of the page load in a text element?
- Add a div block as a loading overlay covering the entire viewport with high z-index.
- Insert and center a text block in the overlay for displaying loading percentage.
- In Project Settings' Custom Code section, add a JavaScript that increments the loading percentage and hides the overlay upon completion.
- Ensure text element ID is
#loading-percentageand overlay class is.loading-overlay.
Displaying a dynamic page load percentage in Webflow involves adding a custom script. Here's how you can approach it:
1. Create a Loading Overlay
- Add a Div Block: Create a div block in Webflow to serve as a loading overlay.
- Style the Div: Position it absolutely so it covers the entire viewport. Set a high z-index to ensure it stays on top.
2. Add a Text Element for Percentage
- Insert a Text Block: Inside the loading overlay, add a text block that will show the loading percentage.
- Common Styling: Center the text within the overlay and choose a large font for visibility.
3. Include Custom JavaScript
- Go to Project Settings: Navigate to the “Custom Code” section.
- Add a Script: Insert the following custom script inside the
<head>or before</body>tags:
```javascript
document.addEventListener("DOMContentLoaded", function () {
const textElement = document.querySelector('#loading-percentage'); // Ensure the element has this ID
let loaded = 0;
let total = 100; // This is an approximation as actual resource tracking would involve a more complex setup
const interval = setInterval(() => {
if (loaded < total) {
loaded += 1; // Increment load percentage
if (textElement) {
textElement.innerText = ${loaded}%;
}
} else {
clearInterval(interval);
document.querySelector('.loading-overlay').style.display = 'none'; // Hide overlay when loading finishes
}
}, 50); // Adjust the speed based on your needs
});
```
4. Ensure IDs and Classes Match
- Verify IDs: Ensure the text element used for displaying the percentage has the ID
#loading-percentage. - Verify Classes: The loading overlay should have a class that matches
.loading-overlayin the script.
Summary
To dynamically display the page load percentage, you need to set up a loading overlay with a text block and utilize a simple script that updates this text. Customize the IDs and styles to match your design. This script provides a simulated percentage, as true resource tracking requires a more complex solution.