0

I want to show a spinning wheel (throbber) when clicking on the div element Menu option1. When an element is clicked in a browser, the viewer is waiting for the page to reload. The waiting time for the page to reload includes sending the information to server, resolving it and then sending the information back again and as the last step loading the page.

I tried to do it with my code below. The problem is that I only see the spinning wheel during the last page loading step, which is only a fraction of the time it takes to wait after clicking on the element. I would like to display the spinning wheel when clicking on the div element Menu option1.

How can I do this?

Since the page is loading too fast to really see the spinning wheel, this can be simulated by using DevTools (Shift+Ctrl+J in chrome) DevTools>Network>Throttling>Slow 3G

or by doing some changes in the HTML, for example, adding an extra

<div class="Menu4" style="border: solid;width:100px;">Menu option4</div>

in https://codepen.io/G1111/pen/zYMrQmq

// deletes the spinning wheel when page is loaded:
window.addEventListener("load", () => {
  document.querySelector(".loader").classList.remove("loader-active");
});
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: gray;
  background-color: rgba(0, 0, 0, .5);
}

.loader-active {
  display: flex;
}

.loader::after {
  content: "";
  width: 180px;
  height: 180px;
  background-image: url("https://tradinglatam.com/wp-content/uploads/2019/04/loading-gif-png-4.gif");
}
<div class="Menu1" style="border: solid;width:100px;">Menu option1</div>
<div class="Menu2" style="border: solid;width:100px;">Menu option2</div>
<div class="Menu3" style="border: solid;width:100px;">Menu option3</div>
<div class="loader loader-active"></div>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
Mr_G
  • 127
  • 1
  • 12
  • It's never a good idea to use a .gif (which might be a relatively large file on its own) as a loading spinner. Use HTML, SVG, CSS keyframe animations instead. Are your menu options actually links? If that's the case, the page *will* reload. It's unclear how you populate your content?! Via AJAX? Besides that I see nothing wrong in the code and the overall approach itself. You show your spinner on DOM ready, and remove the *active* class on window load. Pretty good. Regarding fetching data... if you use AJAX and `fetch` you can always remove the spinner class in the *success* callback. – Roko C. Buljan Jun 16 '23 at 07:59
  • Yes, my menus are links. Yes, the page will reload. I have tested it and seen it myself. The problem is, that if it takes 4 seconds for the page to reload, than i only see the spinner for 0.5 seconds, which makes my current code almost unnecessary. – Mr_G Jun 16 '23 at 08:03
  • I would need the menu div element to trigger the spinner when clicked on. This can be compared to opening up a hamburger menu on a mobile device. When clicking upon the hamburger menu, the div element changes (which in my case would show the spinner). – Mr_G Jun 16 '23 at 08:07
  • Hmm, strange. If I put i.e: several huge images in the document, I see it working pretty well. Do you have some heavy libraries loading? Can you inspect the network tab and see what and where is loading and triggering? – Roko C. Buljan Jun 16 '23 at 08:09
  • *"I would need the menu div element to trigger the spinner when clicked on"* - you cannot if you're using links. A link will request and load an entire new page in the browser (like reloading). Another suggestion - if feasible is to load the page contents dynamically using AJAX - instead of refreshing the page. But that's a too big topic to cover in comments. – Roko C. Buljan Jun 16 '23 at 08:10
  • When I click on the menu I am not refreshing the page, but I go to a diffferent page and that is the page that shows the spinner as it is right now. I would need the current page to trigger the spinner and the second page would close the spinner. So the first page would send a request to load an entire new page AND simultaneously show the spinner. And the new different second page would close the spinner after loading. – Mr_G Jun 16 '23 at 08:22
  • Or maybe it is even enough for the first page to trigger the spinner, and the second page would close the trigger automaticly as the page reloads. – Mr_G Jun 16 '23 at 08:31
  • That's not how things work. A **loading spinner** element cannot persist on the screen when the browser navigates to a different page. A single page should be able to handle that spinner basically the way you did already. Do you have any live demo to show? – Roko C. Buljan Jun 16 '23 at 08:53
  • Thinking about it, I think it will be enough if I show only the spinner on the first page. I will try this soultion: https://stackoverflow.com/questions/58311325/displaying-spinner-onclick – Mr_G Jun 16 '23 at 08:57
  • First of, edit your question to incorporate a [mcve]. Showing some DIVs whilst you actually use Anchors A is not helpful and as you can see only adds noise to the comments section instead of presenting the exact scenario upfront. Secondly, if we are say on index.html, and you want to navigate to i.e: page.html - the browser will reload while requesting the new page.html. Makes no sense to show spinners on `index.html`. What makes more sense is to use that spinner on the desired pages. Again, have you considered using AJAX to fetch your content? Doing it this way the browser will not refresh – Roko C. Buljan Jun 16 '23 at 09:02
  • and you can remove the loading spinner on an AJAX success event in JS. It's hard labor, since if you use AJAX you'll also want to use the History API to update the addresses in the URI. Many existing frontend frameworks (SvelteKit, Nuxt, Next etc) leverage that hard work - but it's a lot of learning to get to that stage. – Roko C. Buljan Jun 16 '23 at 09:04
  • You mean fetching a whole new page using AJAX? I have not thought about it. Also it is too advanced too me. To me it makes sense to show spinner on index.html since that page will freeze when waiting for the secound page to load. And since it is freezing I might as well show a spinner. In my case I do not see any blank page between these two pages. – Mr_G Jun 16 '23 at 09:08
  • Nope. You will ultimately see a blank flash of content. Believe me. Specially if your network is slow. Again - do you have that project somewhere live so I can take a look? PS- I see no reason why clicking a link should freeze a main page. That's not how browsers work. Clicking a link will immediately send you to that other page. What could freeze is indeed the loading of that second page (whilst the browser loads all the assets, scripts, content, etc) – Roko C. Buljan Jun 16 '23 at 09:09
  • Thanks, but I will try some approches myself first and see it it works. – Mr_G Jun 16 '23 at 09:10
  • Sure, you can always go different ways. Why not. Enforces learning strategies! – Roko C. Buljan Jun 16 '23 at 09:12

0 Answers0