My goal is to create a background reveal effect using JavaScript by increasing the percentage.
The effect should start from the center and expand outwards in all directions.
Issue: The percentage increase currently affects only the bottom and not the top as intended.
Seeking Alternatives: If there is an easier method to achieve this effect of revealing a background image within a circle, I would greatly appreciate any suggestions.
Current Attempt:
// Implementing the script here for achieving the desired effect
window.onload = function() {
var counting = false;
function start(count) {
if (!counting) {
counting = true;
$('.preloader_meter').width(count + '%');
$('.preloader_meter').height(count + '%');
var timer = setInterval(function () {
if (count >= 0) {
$('.preloader_meter').width(count + '%');
$('.preloader_meter').height(count + '%');
count++;
} else {
clearInterval(timer);
count = arguments[0];
counting = false;
}
}, 100);
}
}
start(0);
};// CSS code for styling the preloader element
body.preloader {
background: none;
visibility: hidden;
}
#preloader {
font-family: Arial;
font-size: 12px;
visibility: visible;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: auto;
margin: 0;
z-index: 9999999999;
}
/* Other CSS styles continue ... */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="preloader" class="preloader_progress" style="background-color: rgb(38, 45, 51);">
<div class="preloader_loader">
<div class="preloader_meter" style="width: 0%; height: 0%;"></div>
</div>
<div class="preloader_percentage" id="log">85%</div>
</div>