Show CSS Loader While Resource Loading in Go


When we are writing web applications, the time for loading resources becomes longer and longer as the code grows. It's a good idea to show a loading spinner while the website resources are loading. This post will show you how to show a CSS loading spinner while loading and after the whole website is loaded, we will make the spinner invisible.

Show CSS Loading Spinner

First we need to put loading spinner on our web page. after some googling, I found How To Make a CSS Loader on w3schools. We put the following CSS code for loading spinner in the head section of HTML:

/* From https://www.w3schools.com/howto/howto_css_loader.asp */
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

We will hide the loader after finish. So also add the following CSS rule in the head section of HTML.

.invisible { display: none; }

Then put the following loading spinner code in the appropriate place of HTML body.

<div class="loader"></div>

After HTML and CSS code is ready, now we need to write some frontend code to hide the spinner after the website is fully loaded. We will attach the event handler to the load event of window object. This event will be fired after all resources are loaded. You can also attach the event handler to DOMContentLoaded event of document object, which fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

In this example, we will attach the event handler to load event of window object. When resources are fully loaded, hide the CSS loading spinner.

JavaScript

window.addEventListener("load", function(event) {
  var s = document.querySelector(".loader");
  s.classList.add("invisible");
  console.log("All resources finished loading!");
});

GopherJS

The above code in Go/GopherJS is as follows:

import (
      "github.com/gopherjs/gopherjs/js"
)

func main() {
      js.Global.Call("addEventListener", "load", func(event *js.Object) {
              s := js.Global.Get("document").Call("querySelector", ".loader")
              s.Get("classList").Call("add", "invisible")
              println("All resources finished loading!")
      })
}

GopherJS + godom

To make your code more readable, we can prettify the above code with godom:

import (
      . "github.com/siongui/godom"
)

func main() {
      Window.Call("addEventListener", "load", func(e Event) {
              s := Document.QuerySelector(".loader")
              s.ClassList().Add("invisible")
              println("All resources finished loading!")
      })
}

The full code example of this post is on my GitHub.


References:

[1]Synonyms - Go and JavaScript