templates/_partial/loader.html.twig line 1

Open in your IDE?
  1. <style>
  2.     #app-loader {
  3.         position: fixed;
  4.         inset: 0;
  5.         display: flex;
  6.         align-items: center;
  7.         justify-content: center;
  8.         background:
  9.             linear-gradient(145deg, rgba(7, 9, 16, 0.82), rgba(12, 16, 24, 0.8)),
  10.             radial-gradient(circle at 18% 22%, rgba(90, 123, 255, 0.12), transparent 35%),
  11.             radial-gradient(circle at 78% 28%, rgba(255, 189, 89, 0.08), transparent 38%);
  12.         z-index: -9999;
  13.         opacity: 0;
  14.         transition: opacity 250ms ease, z-index 500ms ease;
  15.     }
  16.     #app-loader.show {
  17.         z-index: 9999;
  18.         opacity: 1;
  19.     }
  20.     .loader-spinner {
  21.         width: 72px;
  22.         height: 72px;
  23.         border: 6px solid rgba(255, 255, 255, 0.08);
  24.         border-top-color: var(--app-primary, #6f9dff);
  25.         border-radius: 50%;
  26.         display: inline-block;
  27.         box-sizing: border-box;
  28.         animation: rotation 0.9s linear infinite;
  29.         box-shadow:
  30.             0 10px 30px rgba(0, 0, 0, 0.35),
  31.             0 0 0 1px rgba(255, 255, 255, 0.04);
  32.     }
  33.     @keyframes rotation {
  34.         0% {
  35.             transform: rotate(0deg);
  36.         }
  37.         100% {
  38.             transform: rotate(360deg);
  39.         }
  40.     }
  41. </style>
  42. <script>
  43.     window.addEventListener('load', function() {
  44.         document.getElementById('app-loader').classList.remove('show');
  45.     })
  46. </script>
  47. <div id="app-loader" class='show'>
  48.     <span class="loader-spinner"></span>
  49. </div>