Preloader with Loading Bar

HTML

<div class="preloader-section">
<div class="preloader-container" id="preloader">
	<div class="preloader-top">
	<div class="logo">
		

	</div>
<!-- 	<div class="preload-text font-24 weight-700 text-light">
		Test
	</div> -->
	</div>
	
	<div class="preloader-btm">
	<div class="progress-percent font-90 weight-700 text-light"></div>
	<div class="progress-bar">
		<div class="loading-progress"></div>
		<span></span>
	</div>
<!-- 	<div class="preloader-leaf">
		<svg width="120" height="120" viewbox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M0 0C32.8809 0 59.58 26.4423 59.9951 59.2246L60 60C60 26.8603 86.8603 0 120 0V60C120 92.8809 93.5577 119.58 60.7754 119.995L60 120C26.8603 120 0 93.1397 0 60V0Z" fill="#27925C" />
		</svg>
	</div> -->
	</div>
	
</div>
</div>

CSS

/*preloader*/
.preloader-leaf {
	position: absolute;
	top: 35vh;
	width: 100vw;
	height: auto;
	aspect-ratio: 1;
}
.preloader-leaf svg {
	width: 100%;
	height: 100%;
}
.preloader-leaf {
	position: absolute;
	top: -50vh;
	width: 150vw;
	height: auto;
	aspect-ratio: 1;
	left: -25vw;  
	transition: 1s ease-in-out all;
	transform: translateY(-100vh);
	transform: translateY(60vh);
}
#preloader.active .preloader-leaf {
	transform: translateY(-100vh);
}
.preloader-section .wrap, .preloader-section .column_column, .preloader-section .column_attr, .preloader-container {
	height: 100%;
}
.preloader-container .logo.active, .preloader-container .logo {
    height: 90vh;
	display: flex;
    align-items: center;
}
.logo img {
	width: 50vh;
}
@keyframes scaleAndRotate {
  0% {
    transform: scale(1) rotate(0deg); /* Initial state: no scale, no rotation */
  }
  100% {
    transform: scale(3) rotate(180deg); /* End state: returns to original scale, completes a full rotation */
  }
}
.logo .image_frame {
	margin: auto;
	margin-top: auto;
	margin-bottom: auto;
	display: flex;
	height: max-content;
	width: max-content;
/* 	margin-top: 3vh; */
/* 	opacity: 0.4; */
    mix-blend-mode: screen;
	animation: scaleAndRotate 4s alternate;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.preload-text {
	text-align: center;
	margin-top: 20vh;
}
.progress-percent {
	text-align: center;
	margin-top: 2vh;
	color: #FFF9F5;
	margin-bottom: 5px;
}
.preloader-section {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #003B78;
	z-index: 99;
	transition: 1s ease-in-out all;
}
body.preloader-end .preloader-section {
	opacity: 0;
	pointer-events: none;
}
body.preloader-end .gct-box, body.preloader-end .homebanner-arrows, body.preloader-end .homebanner-video-container {
	animation-play-state: running;
}
body.preloader-start {
  height: 100vh;
  overflow: hidden;
}
body.preloader-start.preloader-end {
  height: auto;
  overflow: auto;
}
.preloader-container img.scale-with-grid {
    opacity: 0.4;
    mix-blend-mode: screen;
}
div#preloader {
    background: linear-gradient(62deg, #1C8B97 47.16%, #A2D7DD 136.37%);
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.preloader-top {
/*     flex: 1; */
	height: 90vh;
}
.preloader-btm {
	height: 10vh;
}
.progress-bar {
      width: 100%; /* Or a fixed width */
      max-width: 100%;
      height: 2px;
      background-color: #50BAC4;
      border-radius: 8px;
      overflow: hidden; /* Important for containing the progress bar */
      margin: 0px auto; /* Center the bar */
    }
.loading-progress {
      height: 100%;
      width: 0%; /* Initial state */
      background-color: #FFF9F5; /* Example color */
      border-radius: 8px;
      animation: fillProgress 3s forwards; /* Example animation */
    }
@keyframes fillProgress {
      0% { width: 0%; }
      100% { width: 100%; }
    }

JS

<script>
jQuery(document).ready(function( $ ){


if($('.preloader-section').length > 0) {

		$('.preloader-section').appendTo('body');

		window.onbeforeunload = function () {
			window.scrollTo(0, 0);
		};



		$('body').addClass('preloader-start');
		var $progressBar = $('.progress-bar span');
		var $progressText = $('.progress-percent');
		var $logo = $('.logo');
		var $preloader = $('#preloader');
		var minDuration = 2000; // minimum time in ms
		var startTime = Date.now();

		function updateProgress(val){
			$progressBar.css('width', val + '%');
			$progressText.text(Math.floor(val) + '%');
			if(val >= 50){
				$logo.addClass('active');
			}
		}

		// Smooth animation from 0 → 90% across minDuration
		var fakeAnim = $({percent:0}).animate({percent:90}, {
			duration: minDuration,
			step: function(now){
				updateProgress(now);
			}
		});

		$(window).on('load', function(){
			var elapsed = Date.now() - startTime;
			var remaining = Math.max(0, minDuration - elapsed);

			setTimeout(function(){
				// Finish 90 → 100% smoothly
				var current = parseInt($progressText.text());
				$({percent:current}).animate({percent:100}, {
					duration: 800,
					step: function(now){
						updateProgress(now);
					},
					complete: function(){
						$preloader.addClass('active'); 
						$('.home-preloader').addClass('active');
						setTimeout(function(){
							$('body').addClass('preloader-end');
						}, 2000);
					}
				});
			}, remaining);
		});
	}
	
	
	});
	</script>