<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<style>
  .loading-screen {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #D8D8D8;
   color: #000;
   pointer-events: none;
	 overflow: hidden;
	 z-index: 9999;
}

.counter {
  position: fixed;
  left: 150px;
  bottom: 150px;
  display: flex;
  height: 100px;
  font-size: 100px;
  line-height: 102px;
  clip-path: polygon(0 0, 100% 0, 100% 100px, 0 100px);
  font-weight: 400;
	color: #000;
	font-family: "Helvetica Neue", "sans-serif";
	overflow: hidden;
}

.counter-1,
.counter-2,
.counter-3,
.counter-4{
  position: relative;
  top: -15px;
	
}

.num1offset1 {
  position: relative;
  right: -15px;
}

.num1offset2 {
  position: relative;

}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 10px;
  transform: translate(-50%, -50%);
  display: flex;
  background: #161616;
/* 	overflow: hidden; */
}
	

.loader-1 {
  position: relative;
  background: #EA550C;
  width: 100%;
	overflow: hidden;
}


.bar {
  height: 10px;
}

  </style>


<div class="loading-screen">
      <div class="loader">
        <div class="loader-1 bar"></div>
        <div class="loader-2 bar"></div>
      </div>
      <div class="counter">
        <div class="counter-1 digit">
          <div class="num">0</div>
          <div class="num num1offset1">1</div>
        </div>
        <div class="counter-2 digit">
          <div class="num">0</div>
          <div class="num num1offset2">1</div>
          <div class="num">2</div>
          <div class="num">3</div>
          <div class="num">4</div>
          <div class="num">5</div>
          <div class="num">6</div>
          <div class="num">7</div>
          <div class="num">8</div>
          <div class="num">9</div>
          <div class="num">0</div>
					
        </div>
        <div class="counter-3 digit">
          <div class="num">0</div>
          <div class="num">1</div>
          <div class="num">2</div>
          <div class="num">3</div>
          <div class="num">4</div>
          <div class="num">5</div>
          <div class="num">6</div>
          <div class="num">7</div>
          <div class="num">8</div>
          <div class="num">9</div>
					
        </div>
				<div class="counter-4 digit">
          <div class="num">%</div>
          
					
        </div>
      </div>
    </div>
  <script>
		
		

    document.addEventListener("DOMContentLoaded", function () {
        const counter3 = document.querySelector(".counter-3");

        for (let i = 0; i < 2; i++) {
          for (let j = 0; j < 10; j++) {
            const div = document.createElement("div");
            div.className = "num";
            div.textContent = j;
            counter3.appendChild(div);
          }
        }
        const finalDiv = document.createElement("div");
        finalDiv.className = "num";
        finalDiv.textContent = "0";
        counter3.appendChild(finalDiv);

        function animate(counter, duration, delay = 0) {
          const numHeight = counter.querySelector(".num").clientHeight;
          const totalDistance =
            (counter.querySelectorAll(".num").length - 1) * numHeight;
          gsap.to(counter, {
            y: -totalDistance,
            duration: duration,
            delay: delay,
            ease: "power2.inOut",
          });
        }

        animate(counter3, 5);
			 animate(document.querySelector(".counter-4"), 2);
        animate(document.querySelector(".counter-2"), 6);
        animate(document.querySelector(".counter-1"), 2, 4);
			
      });

      gsap.to(".digit", {
        top: "-150px",
        stagger: {
          amount: 0.25,
        },
        delay: 6,
        duration: 1,
        ease: "power4.inOut",
      });

      gsap.from(".loader-1", {
        width: 0,
        duration: 6,
        ease: "power2.inOut",
      });


      gsap.to(".loader", {
        background: "none",
        delay: 6,
        duration: 0.1,
      });

      gsap.to(".loader-1", {
        rotate: 90,
//         y: -50,
        duration: 0.5,
        delay: 6,
      });

      gsap.to(".loader", {
        scale: 500,
        duration: 1,
        delay: 7,
        ease: "power2.inOut",
      });

      gsap.to(".loader", {
        duration: 1,
        delay: 7,
        ease: "power2.inOut",
      });

      gsap.to(".loading-screen", {
        opacity: 0,
        duration: 0.5,
        delay: 7.5,
        ease: "power1.inOut",
      });

      gsap.to("h1", 1.5, {
        delay: 7,
        y: -80,
        ease: "power4.inOut",
        stagger: {
          amount: 0.1,
        },
      });
    </script>