loader de porcentaje

				
					<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: #FFFFFF;
  /* 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: 600;
	color: #520821; /* color de 100% */
	font-family: "DM", "Sans-serif"; /* tipografia */
	overflow: hidden;
}


@media (max-width: 1024px) {
  .counter {
    left: 50%;
    transform: translateX(-50%);
    bottom: 100px; /* puedes ajustar */
    text-align: center;
  }
}




.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: #ffffff00;
	overflow: hidden; 
}
	

.loader-1 {
  position: relative;
  background: #520821; /* cambiar color de la barra */
  width: 100%;
	overflow: hidden;
}


.bar {
  height: 10px;
border-radius:1000px;
}</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, 2.5);
			 animate(document.querySelector(".counter-4"), 2);
        animate(document.querySelector(".counter-2"), 3);
        animate(document.querySelector(".counter-1"), 1, 2);
			
      });

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

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




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

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