fade Transitions sur Prealoader

anachouu
Les bases HTML/CSS
Javascript

Décrivez ici votre problème ou ce que vous cherchez à faire.
Bonjour à tous, je suis actuellement en train de construire mon site et j'aimerais qu'un preloader apparaisse comme sur ce site www.octagon.com . J'ai réussi partiellement et avec beaucoup d'erreurs je le crains... Je cherche à mettre en place des transitions entre l'apparition de mon logo, la phrase suivante puis enfin l'apparition de mon site. J'ai essayé d'intégré des transitions dans le css mais rien n'y fait. J'ai essayé dans le javascript mais je maîtrise très mal cette partie, je ne réussi à rien faire. De plus j'aimerais centré mon logo mais je ne comprends pas pourquoi, cela refuse de se faire... Je suis bien désespérée, aurez-vous des astuces pour moi ? Merci à vous ! 

<html>
  <head>
    <style>
      /* Preloader styles */
      #preloader {
          height: 100vh;
          width: 100vw;
          display: table-cell;
          vertical-align: middle;
          padding: 15vw;
          z-index: 9999;
          background-color: #000000;

      }

      /* logo styles */
      #logo {
        /*width: 50px;
        height: 50px;
        position: absolute;
        left: 50%;
        top: 50%;
        background-image: url(http://starterz.org/wp-content/uploads/2022/12/cropped-LOGO-ICONE-COULEUR.png);
        background-repeat: no-repeat;
        background-position: center;*/
      }

      /* sentence styles */
      #sentence {
          color: #fff;
          font-family:'Barlow';
          text-transform:uppercase;
          font-size: 2em;
          text-align: center;

      }

    </style>
  </head>
  <body>
    <div id="preloader">
      <div id="logo"><img src="http://starterz.org/wp-content/uploads/2022/12/cropped-LOGO-ICONE-COULEUR.png"></div>
      <div id="sentence"></div>
    </div>

    <script>
      // Show logo for 2 seconds
      setTimeout(function() {
        document.getElementById("logo").style.display = "none";
        document.getElementById("sentence").innerHTML = "La Communication au service de la Performance";

      }, 2000);

      // Show site content after 4 seconds
      setTimeout(function() {
        document.getElementById("preloader").style.display = "none";
      }, 4000);
});

    </script>
  </body>
</html>

Aucune réponse