.gif)
<div class="c-preloader"> <div class="c-preloader__count"></div> <div class="c-preloader__progress"></div> </div>
.bricks-is-frontend .c-preloader {
position: fixed;
top: 0;
left: 0;
background: #cc0000;
width: 100%;
height: 100vh;
z-index: 10;
}
.bricks-is-frontend .c-preloader__count {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: clamp(4rem, 3.824vw + 2.776rem, 8rem);
font-weight: 100;
letter-spacing: -.5rem;
z-index: 10;
}
.bricks-is-frontend .c-preloader__progress {
background: black;
height: 100%;
width: 0%;
position: absolute;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
<script>
var imgLoad = imagesLoaded('img');
var progressBar = jQuery(".c-preloader__progress"),
count = jQuery(".c-preloader__count"),
images = jQuery("img").length,
loadedCount = 0,
loadingProgress = 0;
var tlProgress = new TimelineMax({
paused: true,
onUpdate: countPercent,
onComplete: loadComplete
});
tlProgress.to(progressBar, 1, {width:"100%"});
imgLoad.on('progress', function(instance, image) {
loadProgress();
});
function loadProgress() {
loadedCount++;
loadingProgress = (loadedCount / images);
console.log(loadingProgress);
TweenMax.to(tlProgress, 1, {progress: loadingProgress});
}
function countPercent() {
var newPercent = (tlProgress.progress() * 100).toFixed();
count.text(newPercent + "%");
}
function loadComplete() {
var tlEnd = new TimelineMax();
tlEnd
.to(count, 0.5, {autoAlpha: 0})
.to(".c-preloader", 0.5, {scaleX: 0, transformOrigin: "center right"});
}
</script>
/* Default state: transparent background */
#brx-header.sticky {
position: sticky;
top: 0;
transition: opacity 0.5s ease, background-color 0.5s ease;
opacity: 1;
visibility: visible;
background-color: transparent !important; /* Start with transparent background */
}
/* Hidden state when scrolling down */
#brx-header.sticky.nav-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
background-color: transparent !important; /* Stay transparent when hidden */
}
/* Visible state when scrolling up: background becomes black */
#brx-header.sticky.nav-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
background-color: rgba(0, 0, 0, 0.5) !important; /* Background becomes black when scrolling up */
}
document.addEventListener('DOMContentLoaded', function () {
let lastScrollTop = 0;
const nav = document.querySelector('#brx-header.sticky'); // Ensure this targets the correct header element
let hasScrolledDown = false; // Track if the user has scrolled down
// Listen for the scroll event on the window
window.addEventListener('scroll', function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
console.log('Scroll position:', scrollTop); // Check scroll position in console
if (scrollTop > lastScrollTop) {
// User is scrolling down
console.log('Scrolling down');
nav.classList.remove('nav-visible');
nav.classList.add('nav-hidden');
hasScrolledDown = true; // User has scrolled down
} else if (scrollTop < lastScrollTop && hasScrolledDown) {
// User is scrolling up and has already scrolled down
console.log('Scrolling up');
nav.classList.remove('nav-hidden');
nav.classList.add('nav-visible');
}
// Update the last scroll position
lastScrollTop = scrollTop;
});
});
Thanks for your message! We typically take one to two working days to respond. In the meantime, feel free to check out our website or get in touch with us at:
Women like Khem Maya Rokaya from Bajura are already feeling the difference: