Скрыть счетчик/загрузчик при нажатии кнопки браузера «Назад/Вперед» ⇐ CSS

[Anonymous]

У меня есть счетчик CSS, который анимируется после щелчка по тегу привязки ссылки (перенаправление на внешнюю веб-страницу/приложение). Однако после завершения загрузки страницы на внешнюю веб-страницу и нажатия пользователем кнопки «Назад» в браузере (и даже кнопки «Вперед») счетчик все еще отображается. Есть ли способ скрыть счетчик при нажатии кнопки Windows «Назад/Вперед»? Или есть лучший способ реализовать счетчик, чтобы, когда пользователь перемещается по кнопкам браузера вперед и назад, счетчик скрывался?
Локально в VScode счетчик скрывается после нажатия кнопки кнопку «Назад», но после развертывания на Github счетчик все еще отображается. С помощью инструмента инспектора браузера я также очистил кеш/файл cookie, и он все еще отображается.
Ссылка на рабочее портфолио здесь: https://austinxduong.com/
HTML


Apps i recently created:

This API connects to an interactive front-end built with React.js. When pasting a url link of a website, it renders a shortened link --- shareable across various social media websites posts

API: https://backend-microservice-urlshortener.onrender.com/


CSS
.loadingDiv {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f7f9fb89;
}

.loadingDiv::after {
content: "";
width: 60px;
height: 60px;
border: 15px solid #dddddd;
border-top-color: #1ecd97;
border-radius: 50%;
animation: loading 0.75s ease infinite;
}

JavaScript/jQuery
$('a').on("click", function(){
$('loading...').prependTo(document.body);
});

$(window).on("click", function(){
$('loading...').hide();
});

Я также думал/пробовал, что событие «popstate» скроет div, после этого события история окна изменится (нажатие кнопки «Назад»), но результаты все равно те же... ( может быть потому, что нажатие кнопки «Назад» восстанавливает предыдущее состояние истории?)
// $(window).on('popstate', function(){
// $('loading...').hide();
// })

В качестве альтернативы я также пытался реализовать функцию счетчика только с помощью Vanilla JavaScript, но результаты остались прежними. Любые предложения и очень признательны! Спасибо
HTML


Apps i recently created:

This API connects to an interactive front-end built with React.js. When pasting a url link of a website, it renders a shortened link --- shareable across various social media websites posts

API: https://backend-microservice-urlshortener.onrender.com/





CSS
.loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f7f9fb89;
transition: opacity 0.75s, visibility 0.75s;
}

.loading::after {
content: "";
width: 60px;
height: 60px;
border: 15px solid #dddddd;
border-top-color: #1ecd97;
border-radius: 50%;
animation: loading 0.75s ease infinite;
}

@keyframes loading {
from {
transform: rotate(0turn);
}

to {
transform: rotate(1turn);
}
}

JavaScript
function spinner0(){
const spinnerDisplayer0 = document.querySelector('.spinner-displayer-0');
const btnspinner0 = document.getElementById('btnspinner-0');

btnspinner0.addEventListener('click', () => {
spinnerDisplayer0.classList.add('loading');
})
}
spinner0();


Подробнее здесь: https://stackoverflow.com/questions/790 ... ard-button