HTML frame: "please wait" while loading - html

Question

I have very simple web page with frames. I understand frames are obsolete.
When I click on a link in the sidebar, a PHP page loads in the main frame.
Page A
Page B
Page C
The pages take several seconds to load. If page A is displayed, then I click on page B, there will be no visible change, and no feedback that the click has happened, until page B is ready.
I would like, as soon as the link is clicked, to clear the main frame, and display a "please wait" sign there, while the PHP script runs. How do I do that?
I am totally open to a solution using iframes, rather than frames.

Answer 1

You could place the sign above the frame (using position: fixed;) and hide it (display: none;). Then make it visible as soon the link is clicked (onclick) and hide it, when frame has loaded (onload).
Here's an example:
function showSpinner() {
document.getElementById('sign').style.display = 'block';
}
function hideSpinner() {
document.getElementById('sign').style.display = 'none';
}
#sign {
display: none;
position: fixed;
}
Page A
Page B
Page C
<iframe name="Frame_Main" src="pageA.php" onload="hideSpinner()">
</iframe>
<div id="sign">
<img src="images/sign.png" alt="please wait" />
</div>

Answer 2

You need to use onload method inside iframe element and click on aside-bar link to set attribute value of iframe src and add active class on frame-wrapper for showing Please wait text and when your page loaded inside iframe then onload method will fire and remove active class from frame-wrapper. Below is working snippet I hope this will help you.
document.querySelectorAll('a').forEach(elem => {
elem.addEventListener('click', (e) => {
e.preventDefault();
document.getElementById('wrapper').classList.add('active');
document.getElementById('frame').setAttribute('src', e.target.href)
})
})
.frame-wrapper {
width: 320px;
height: auto;
position: relative;
}
.frame-wrapper::after {
content: attr(data-load);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-size: 30px;
color: #fff;
background: rgba(0, 0, 0, 0.65);
transition: 350ms;
opacity: 0;
pointer-events: none;
}
.frame-wrapper.active::after {
opacity: 1;
pointer-events: all;
}
<aside>
Page A
Page B
Page C
</aside>
<div class="frame-wrapper active" data-load="Please wait" id="wrapper">
<iframe src="pageA.php" id="frame" onload="document.getElementById('wrapper').classList.remove('active')" width="100%" height="220"></iframe>
</div>

Answer 3

you done the following css approach:
<div class="holds-the-iframe"><iframe here></iframe></div>
.holds-the-iframe {
background:url(../images/loader.gif) center center no-repeat;
}