Loader
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="pt-2 pb-2 col-lg-2 col-md-3 col-sm-4 col-6 main-loader">
<svg class="mx-auto d-block" width="60" height="60" viewbox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="loader_56">
<g class="loader_circle_1" id="loader_56_1">
<rect id="Rectangle 134" width="60" height="60" rx="30" fill="white"></rect>
<path
id="Ellipse 12"
d="M25 5.00024C25 2.23882 27.2386 0.000244075 30 0.000244141C32.7614 0.000244207 35 2.23882 35 5.00024C35 7.76167 32.7614 10.0002 30 10.0002C27.2386 10.0002 25 7.76167 25 5.00024Z"
fill="#3a53a3"
></path>
<path
id="Ellipse 11"
d="M13.1697 49.1507C14.5504 46.7593 17.6084 45.9399 19.9999 47.3206C22.3913 48.7013 23.2107 51.7593 21.83 54.1507C20.4493 56.5422 17.3913 57.3616 14.9999 55.9809C12.6084 54.6002 11.789 51.5422 13.1697 49.1507Z"
fill="white"
></path>
<path
id="Ellipse 12_2"
d="M38.1697 5.84947C39.5504 3.458 42.6084 2.63863 44.9999 4.01934C47.3913 5.40005 48.2107 8.458 46.83 10.8495C45.4493 13.2409 42.3913 14.0603 39.9999 12.6796C37.6084 11.2989 36.789 8.24093 38.1697 5.84947Z"
fill="white"
></path>
<path
id="Ellipse 11_2"
d="M7.84953 41.6341C8.32782 41.358 8.93942 41.5219 9.21556 42.0002C9.4917 42.4785 9.32782 43.0901 8.84953 43.3662C8.37124 43.6423 7.75965 43.4785 7.48351 43.0002C7.20736 42.5219 7.37124 41.9103 7.84953 41.6341Z"
fill="#3a53a3"
></path>
<path
id="Ellipse 12_3"
d="M14.0361 10.3495C12.9315 8.43637 13.587 5.99001 15.5002 4.88544C17.4133 3.78087 19.8597 4.43637 20.9643 6.34954C22.0689 8.26271 21.4133 10.7091 19.5002 11.8136C17.587 12.9182 15.1406 12.2627 14.0361 10.3495Z"
fill="#3a53a3"
></path>
<path
id="Ellipse 12_4"
d="M6.84938 20.0983C5.4145 19.2699 4.92287 17.4351 5.7513 16.0003C6.57973 14.5654 8.4145 14.0738 9.84938 14.9022C11.2843 15.7306 11.7759 17.5654 10.9475 19.0003C10.119 20.4351 8.28426 20.9268 6.84938 20.0983Z"
fill="#3a53a3"
></path>
<path
id="Ellipse 12_5"
d="M5.00024 32.0002C3.89567 32.0002 3.00024 31.1048 3.00024 30.0002C3.00024 28.8957 3.89567 28.0002 5.00024 28.0002C6.10481 28.0002 7.00024 28.8957 7.00024 30.0002C7.00024 31.1048 6.10481 32.0002 5.00024 32.0002Z"
fill="#3a53a3"
></path>
</g>
<g class="loader_circle_2" id="loader_56_2">
<rect id="Rectangle 134_2" x="10" y="10" width="40" height="40" rx="20" fill="white"></rect>
<path
id="Ellipse 12_6"
d="M26.6667 13.3335C26.6667 11.4925 28.1591 10.0001 30.0001 10.0001C31.841 10.0001 33.3334 11.4925 33.3334 13.3335C33.3334 15.1744 31.841 16.6668 30.0001 16.6668C28.1591 16.6668 26.6667 15.1744 26.6667 13.3335Z"
fill="#3a53a3"
></path>
<path
id="Ellipse 11_3"
d="M18.7799 42.7672C19.7004 41.1729 21.739 40.6266 23.3333 41.5471C24.9276 42.4676 25.4739 44.5062 24.5534 46.1005C23.6329 47.6948 21.5943 48.2411 20 47.3206C18.4057 46.4001 17.8594 44.3615 18.7799 42.7672Z"
fill="white"
></path>
<path
id="Ellipse 12_7"
d="M35.4464 13.8996C36.3669 12.3053 38.4055 11.7591 39.9998 12.6796C41.5941 13.6 42.1404 15.6387 41.2199 17.233C40.2994 18.8273 38.2608 19.3735 36.6665 18.4531C35.0722 17.5326 34.5259 15.494 35.4464 13.8996Z"
fill="white"
></path>
<path
id="Ellipse 11_4"
d="M15.2331 37.7561C15.552 37.572 15.9597 37.6812 16.1438 38.0001C16.3279 38.3189 16.2186 38.7267 15.8998 38.9108C15.5809 39.0948 15.1732 38.9856 14.9891 38.6667C14.805 38.3479 14.9142 37.9401 15.2331 37.7561Z"
fill="#3a53a3"
></path>
<path
id="Ellipse 12_8"
d="M19.3575 16.8997C18.6211 15.6243 19.0581 13.9934 20.3335 13.257C21.609 12.5206 23.2399 12.9576 23.9763 14.2331C24.7126 15.5085 24.2756 17.1394 23.0002 17.8758C21.7248 18.6122 20.0938 18.1752 19.3575 16.8997Z"
fill="#3a53a3"
></path>
<path
id="Ellipse 12_9"
d="M14.5663 23.3989C13.6097 22.8466 13.2819 21.6234 13.8342 20.6668C14.3865 19.7103 15.6097 19.3825 16.5663 19.9348C17.5228 20.4871 17.8506 21.7103 17.2983 22.6668C16.746 23.6234 15.5228 23.9512 14.5663 23.3989Z"
fill="#3a53a3"
></path>
<path
id="Ellipse 12_10"
d="M13.3336 31.3335C12.5972 31.3335 12.0002 30.7366 12.0002 30.0002C12.0002 29.2638 12.5972 28.6669 13.3336 28.6669C14.07 28.6669 14.6669 29.2638 14.6669 30.0002C14.6669 30.7366 14.07 31.3335 13.3336 31.3335Z"
fill="#3a53a3"
></path>
</g>
<g class="loader_circle_3" id="loader_56_3">
<rect id="Rectangle 134_3" x="17" y="17" width="26" height="26" rx="13" fill="white"></rect>
<path
id="Ellipse 12_11"
d="M27.8335 19.1668C27.8335 17.9702 28.8035 17.0001 30.0002 17.0001C31.1968 17.0001 32.1668 17.9702 32.1668 19.1668C32.1668 20.3634 31.1968 21.3335 30.0002 21.3335C28.8035 21.3335 27.8335 20.3634 27.8335 19.1668Z"
fill="#3a53a3"
></path>
<path
id="Ellipse 11_5"
d="M22.7069 38.2987C23.3052 37.2624 24.6303 36.9073 25.6666 37.5056C26.7029 38.1039 27.058 39.429 26.4597 40.4653C25.8614 41.5016 24.5363 41.8567 23.5 41.2584C22.4637 40.6601 22.1086 39.335 22.7069 38.2987Z"
fill="white"
></path>
<path
id="Ellipse 12_12"
d="M33.5402 19.5349C34.1385 18.4986 35.4636 18.1435 36.4999 18.7418C37.5362 19.3401 37.8912 20.6652 37.2929 21.7015C36.6946 22.7378 35.3695 23.0929 34.3332 22.4946C33.2969 21.8963 32.9418 20.5712 33.5402 19.5349Z"
fill="white"
></path>
<path
id="Ellipse 11_6"
d="M20.4016 35.0415C20.6088 34.9219 20.8738 34.9929 20.9935 35.2001C21.1132 35.4074 21.0421 35.6724 20.8349 35.7921C20.6276 35.9117 20.3626 35.8407 20.2429 35.6335C20.1233 35.4262 20.1943 35.1612 20.4016 35.0415Z"
fill="#3a53a3"
></path>
<path
id="Ellipse 12_13"
d="M23.0824 21.4848C22.6037 20.6558 22.8878 19.5957 23.7168 19.117C24.5458 18.6384 25.6059 18.9224 26.0846 19.7515C26.5632 20.5805 26.2792 21.6406 25.4501 22.1193C24.6211 22.5979 23.561 22.3139 23.0824 21.4848Z"
fill="#3a53a3"
></path>
<path
id="Ellipse 12_14"
d="M19.9681 25.7094C19.3463 25.3504 19.1333 24.5553 19.4923 23.9335C19.8512 23.3118 20.6463 23.0987 21.2681 23.4577C21.8899 23.8167 22.1029 24.6118 21.7439 25.2335C21.3849 25.8553 20.5899 26.0684 19.9681 25.7094Z"
fill="#3a53a3"
></path>
<path
id="Ellipse 12_15"
d="M19.1667 30.8668C18.6881 30.8668 18.3 30.4787 18.3 30.0001C18.3 29.5214 18.6881 29.1334 19.1667 29.1334C19.6454 29.1334 20.0334 29.5214 20.0334 30.0001C20.0334 30.4787 19.6454 30.8668 19.1667 30.8668Z"
fill="#3a53a3"
></path>
</g>
</g>
</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.
Toggle Loader:
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.