I have this code in my index.html file stackblitz example
<html style="height: 100%;" lang="en" class="perfect-scrollbar-off nav-open">
<head>
<style type="text/css">
.loaderDiv {
background: #117CF7;
width: 100%;
height: 100%;
display: flex;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 200px;
height: 200px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
margin: auto;
}
#supersmartLogo {
width: 150px;
height: 150px;
position: absolute;
left: 45%;
top: 38%;
}
.wrapper {
background: url('./random.svg') center no-repeat;
background-size:50%;
margin: auto;
width: 240px;
height: 240px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body style="height: 100%;" class="g-sidenav-show g-sidenav-pinned">
<div id="root" style="height: 100%;">
<div class="loaderDiv">
<div class="wrapper">
<div class="loader"></div>
</div>
</div>
</div>
</body>
</html>
it's working fine but I have some problems:
the random.svg shows only for the first reload and when I move between pages the random.svg does not show.
how can I add a shadow under the spinner like this.
can anyone tell me how to fix it please or a better way to achieve this behavior?
