Tengo este código en mi ejemplo de stackblitz de archivo index.html
<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>funciona bien pero tengo algunos problemas:
el random.svg se muestra solo para la primera recarga y cuando me muevo entre las páginas, el random.svg no se muestra.
¿Cómo puedo agregar una sombra debajo de la ruleta como esta ?
¿Alguien puede decirme cómo solucionarlo por favor o una mejor manera de lograr este comportamiento?
