Sometimes content on the page take time to load, because of which the user might see the content with improper design. To avoid that we could show the loader untill the content is loaded properly.

Below is our code for showing loader for 2 seconds on initial page load. you can find loader component on this path: components > common > Loader.vue

Loader.vue

<template>
    <div class="loader-wrapper" :class="{ 'd-none': loaderHide }">
    <div class="theme-loader">
      <svg width="100" height="100" viewbox="0 0 100 100">
        <circle class="circle outer" cx="50" cy="50" r="45"></circle>
        <circle class="circle inner" cx="50" cy="50" r="25"></circle>
        <circle class="dots" cx="50" cy="5" r="3"></circle>
        <circle class="dots" cx="95" cy="50" r="3"></circle>
        <circle class="dots" cx="50" cy="95" r="3"></circle>
        <circle class="dots" cx="5" cy="50" r="3"></circle>
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
let loaderHide = ref<boolean>(false);
let timeoutId: ReturnType<typeof setTimeout> | null = null;

onMounted(() => {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }

  timeoutId = setTimeout(() => {
    loaderHide.value = true;
    timeoutId = null; // reset
  }, 3000);
});

onBeforeUnmount(() => {
  if (timeoutId) {
    clearTimeout(timeoutId);
    timeoutId = null;
  }
});
</script>

<style scoped></style>

We have added the loader div and given the animation in its scss file.

To show and hide the loader we toggle display: none through loaderHide variable. it toggles display of the div between none and visible. Initially we have kept show to true, but when the component is mounted we run a function which call the settimeout function. settimeout functions overwrites the value of show variable to false after 2 second.

If you want to make changes in the animation or the design of the loader, you can navigate to assets > scss > components > _loader.scss. Here default styles and animation has been given, make changes as per your needs.

You can modify the timing of the loader by changing the time in setTimeout function. Instead of 2000ms you can set any time as per your needs.