نمایش لودینگ بلافاصله بعد از کلیک روی لینک های صفحه

احتمالا چیزی که دنبالش هستید مستلزم داشتن SPA‌ (Single Page Application) هست. چون در غیر این حالت، به هر حال صفحه باید reload بشه و انیمیشن هم لودینگ هم همراهش میره و نتیجه اش چندان جالب نمیشه.

درسته اما میخواستم وقتی کسی کلیک میکنه بدونه سایت در حال پردازشش هست و منتظر بمونه تا منتقل بشه

کار خیلی رایج و شاید اصولی نیست اما می‌تونید یک listener ساده تنظیم کنید برای مواقعی که روی hyperlink ها کلیک میشه. مثلا اینجوری:

//simple JavaScript:
document.querySelectorAll('a').forEach(hyperlink => {
    hyperlink.addEventListener('click', () => {
        showLoadingAnimation();
    });
});

//with JQuery:
$('a').click(() => {
    showLoadingAnimation();
});

سلام و تشکر آقای یگانه عزیز

ولی نمیدونم چجوری میتونم یک لودینگ رو با این دستور نشون بدم
مبتدی هستم، اگر ممکن بود براتون بهم بگین کجا قرار بدم در وردپرس و اینکه کجا میتونم قرار بدم که لودینگ من رو نشون بده(عکس یا لوگو یا بک گراند محو مثلا)

داخل فایل index.html این تگا را بزن

<a onclick="Google()" id="google">Google</a>
<h2 id="loading">Loading...</h2>

داخل فایل style.css این استایل را بزن

a {
    cursor: pointer;
    color: blue;
}

h2 {
    display: none;
}

داخل فایل js این کدا را بزن

const a = document.getElementById('google')
const h2 = document.getElementById('loading')

const isLoad = true

function Google() {
    if (isLoad) {
        h2.style.display = 'block'
        setTimeout(() => {
            window.location.href = 'https://google.com'
            h2.style.display = 'none'
            isLoad = true
        }, 1000)
    } else {
        h2.style.display = 'none'
    }
}