Preloader. HTML, CSS, jQuery

I put a preloader on the main page of my site. It worked. but if I go to another page of the site and go back to the main page again, the preloader is working.

Is it possible to avoid it? The preloader should only work when accessing the site.

jQuery Code

        function counter() {
            var count = setInterval(function() {
                var c = parseInt($('.counter').text());
                $('.counter').text((++c).toString());
                if (c == 100) {
                    clearInterval(count);
                    $('.counter').addClass('hide')
                    $('.preloader').addClass('active')
                }
            },40)
        }
        counter()

CSS code

.preloader {
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: #e7e8ff;
    z-index: 100000000;
}
.preloader:before {
    content: 'Loading';
    position: absolute;
    font-size: 70px;
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(184, 185, 211, 0.3);
}
.preloader:after {
    top: 90%;
    text-align: center;
    content: 'by CodeSphere';
    position: absolute;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 4px;
    color: #333;
}
.preloader.active {
    transform: translateY(-100vh);
    transition: ease-in-out 2s;
    transition-delay: 1s;
}
.counter {
    position: relative;
    color: #232530;
    font-size: 120px;
    font-weight: 700;
    z-index: 1;
}
.counter:after {
    content: '%';
    font-size: 0.5em;
}
.hide {
    opacity: 0;
    transition: 1s;
    pointer-events: none;
}

HTML code

<div class="preloader">
        <div class="counter">0</div>
</div>