index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="sass/dist/styles.css" media="screen"/>
    <title></title>
  </head>
  <body>

    <h3 class="title">Preloader</h3>

    <div class="buttons">
      <button class="button preloader-open">Load</button>
      <button class="button preloader-close">Close</button>
    </div>

    <script src="js/dist/ui-preloader.js"></script>
    <script>

      /**
      * init open button
      */
      const openButton = document.querySelector('.button.preloader-open');
      const closeButton = document.querySelector('.button.preloader-close');

      /**
      * start new instance of UiPreloader
      */
      const uiPreloader = UiPreloader.init();

      // window.addEventListener('load', () => {
      //   uiPreloader.render();
      // })


      /**
      * addEventListener to render and destroy preloader
      */

      openButton.addEventListener('click', () => {
        uiPreloader.render();
      })

      closeButton.addEventListener('click', () => {
        uiPreloader.destroy();
      })


    </script>

  </body>
</html>