Instant Preloader Bar

If you want to prevent the so called FOUT or FOUC (Flash Of Unstyled Text or Content) and show a (fake) inline preloader bar until all resources are loaded.

Press CMD+F5 to show it again (hard reload)

How-To

Put the following code-snippets into your Webflow Custom Code Section (Page Settings)

Step 1

Add this Custom Code inside <HEAD> tag:


<style>
.preloader {
display:inline;
z-index: 2000;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: white;
transition: opacity .65s ease;
}
.loading-bar {
width: 12%;
height: 5px;
background-color: #00ea95;
transition: width 8000ms cubic-bezier(.25, 0, 0, 1); 
}
</style>
<script>
  document.addEventListener("DOMContentLoaded", function() {
  	requestAnimationFrame(function() {
			document.getElementById("loadingBar").style.width = "100%";
      });
    });
</script>

Step 2

Add this Custom Code before </BODY> tag:


<script>
window.onload = function () {
document.getElementById("loadingIndicator").style.opacity = "0";
setTimeout(function() {
    document.getElementById("loadingIndicator").style.display = "none";}, 450);
}
</script>

Step 3

Add the following two DIVs and class names inside Webflow

Make the outer DIV invisible (display: none)

2.5MB GIF Image to fire the preloader

Huge GIF image to simulate a heavy loading website