templates/website/parts/loading.html.twig line 1

  1. <div class="loader-container" id="loading" >
  2.     <img id="randomImage" width="100%" src="" alt="hero">
  3. </div>
  4. <script>
  5.     const images = [
  6.         { url: '/static_images/loader/ana.gif', img: '/static_images/loader/ana.png', class: 'color-lilac'},
  7.         { url: '/static_images/loader/luys.gif', img: '/static_images/loader/luys.png', class: 'color-orange'},
  8.         { url: '/static_images/loader/nunj.gif', img: '/static_images/loader/nunj.png', class: 'color-blue'},
  9.         { url: '/static_images/loader/pinchu.gif', img: '/static_images/loader/pinchu.png', class: 'color-green'},
  10.         { url: '/static_images/loader/zor.gif', img: '/static_images/loader/zor.png', class: 'color-red'},
  11.         { url: '/static_images/loader/yan.gif', img: '/static_images/loader/yan.png', class: 'color-purple' }
  12.     ];
  14.     function showRandomImage() {
  15.         const randomIndex = Math.floor(Math.random() * images.length);
  16.         const randomImage = images[randomIndex];
  17.         const randomClass = images[randomIndex];
  19.         document.body.classList.add(randomClass.class);
  20.         document.getElementById('randomImage').src = randomImage.url;
  21.         document.querySelectorAll('#hero-random-img').forEach((item)=>{
  22.             item.src = randomImage.img;
  23.         });
  24.         // document.getElementById('loading').style.display = 'flex';
  25.     }
  26.     // function hideLoader() {
  27.     //     document.getElementById('loading').style.display = 'none';
  28.     // }
  30.     if (document.readyState === 'complete') {
  31.         // hideLoader();
  32.     } else {
  33.         showRandomImage();
  35.         // window.onload = function () {
  36.         //     hideLoader();
  37.         // };
  38.     }
  39. </script>