Loading Demo

In plain javascript:

document.title = 'Loading.';
const loadingTextTimeout = setInterval(() => {
  if (document.title !== 'Loading.....') {
    document.title += '.';
  } else {
    document.title = 'Loading.';
  }
}, 250);

const onLoaded = () => {
  clearInterval(loadingTextTimeout);
  document.title = 'Success!';
  var link = document.querySelector("link[rel~='icon']");
  link.href = "./success.gif"
}
  

With a framework (like svelte):

<svelte:head>
  <title>{isLoading ? `Loading${loadingDots}` : 'Success!'}</title>
  <link rel="icon" href={isLoading ? './loading.svg' : './success.gif'} />
</svelte:head>
  

You can have a lot of fun manipulating the title tag and fav icon with javascript. Watch your browser tab as the title text is updated until some arbitrary time later when it declares itself done loading. This is a very basic example, but you can be as creative as you want with it! Some browsers (Firefox for example) even supports gifs as fav icons.