Preloader Progress Bar

✅ Steps to Add in WPCode Plugin:

1. Go to WPCode → Add New Snippet
2. Select “HTML Snippet”
3. Paste the code below
4. Set Location: Site Wide (Footer)
5. Activate the Snippet

📌 Full Code for WPCode Plugin

<!-- Font Awesome for Icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<style>
/* Progress Bar Styling */
#progress-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 9999;
}

#progress-bar {
    width: 0%;
    height: 100%;
    background: #3498db; /* Change color if needed */
    transition: width 0.2s ease-in-out;
}
</style>

<!-- Progress Bar -->
<div id="progress-bar-container">
    <div id="progress-bar"></div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    var progressBar = document.getElementById("progress-bar");

    window.addEventListener("scroll", function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        var scrollPercentage = (scrollTop / scrollHeight) * 100;
        progressBar.style.width = scrollPercentage + "%";
    });
});
</script>

🔹 How It Works:

✅ The progress bar fills up based on how much of the page is scrolled.
✅ Smooth transition effect makes it visually appealing.
✅ Minimal design, easy to customize!

Just activate the snippet in WPCode, and the scroll progress bar will work on your site! 🚀🔥