I have implemented a custom loader in CSS with the following styles:
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 80px;
height: 80px;
animation: spin 2s linear infinite;
position: absolute;
margin: auto;
top:-90px;
bottom:0;
right:0;
left:0;
z-index:1020;
overflow: auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
In my HTML code (using vuejs template), I have structured it like this:
<template>
<div class="container">
<div class="row">
<div class=" mx-auto col-sm-8">
<section>
<div v-if="showloader" class="loader"></div>
</section>
</div>
</div>
</div>
</template>
The visibility of the loader is dynamically controlled by a variable called showloader. It will be displayed when showloader is true and hidden when false.
Here is how the JavaScript function is set up:
var showloader = false;
function doSomething() {
showloader = true;
setTimeout(function(){
showloader = false;
alert("Hello");
}, 3000);
}
doSomething();
When the user triggers an action, the showloader variable is set to true to display the loader, then after 3 seconds it is set back to false. However, I am facing challenges ensuring that user interactions are disabled when the loader is shown, creating a lightbox effect, and centering the loading animation in the browser viewport.
I have been trying different approaches for hours but haven't found a solution yet.