Flat Preloader Icon
<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;
  });
});

Welcome to INF — International Nepal Fellowship

INF Nepal is a Nepali non-government organisation serving Nepali people through health and development works.
INF Nepal's Vision is to bring:

Life in all its fullness for Nepal’s poor & disadvantaged.

Working across the poorer western half of Nepal to bring sustainable improvements in health and quality of life of people and communities, including those affected by stigmatising diseases such as leprosy, fistula, and disability. INF Nepal’s clinical team run three hospitals that provide high-quality care for people and has ambitious plans to develop three hospitals as national centres of excellence.

All INF's latest

News & Events

All our News
Tara Shares her Story:

“I’m so happy to have my independence back,” Tara said with a smile.

“Now, I can do things on my own again, and I’m excited to help my husband with work so we can support our family together.”

Tara’s recovery is part of a broader impact at SH-IS, where 49 patients with spinal cord injuries and 136 individuals with disabilities have received therapeutic services, regaining control over their lives and enhancing their functional abilities.

Ram Bahadur Shares His Story:

“I’m so grateful for the care I received at INF's Shining Hospital, The staff treated me like family. Thanks to them, my wound is healing, and I can look forward to better days with my loved ones.”

Click the link below to read more about Ram's courageous story and the life-changing impact of Shining Hospital’s dedicated team.

0+

Outpatient Visits in 2023-2024

0+

Total Households reached in 2023-2024

0+

Community Mobilizers—Nepali

0+

Hearing aids provided 2023-2024

Watch

We Are INF

Watch all

“We Are INF” introduces the work of the International Nepal Fellowship (INF). Established in 1952, INF is a Christian mission serving the people of Nepal through health and development work. INF helps people affected by TB, leprosy, disability, HIV/AIDS, and drug abuse, while also facilitating development in poor communities, running medical camps, and providing medical training.