Preloader

Arrigo has a built-in preloader with SVG stroke animation that indicates if the page is loaded or not. Right after loading all the images, the preloader disappears with a nice curtains slide-up animation.

<!-- PAGE PRELOADER -->
<div class="preloader">
  <!-- Add as many curtains as you need. -->
  <div class="preloader__curtain bg-light"></div>
  <div class="preloader__curtain bg-light"></div>
  <div class="preloader__curtain bg-light"></div>
  <div class="preloader__curtain bg-light"></div>
  <div class="preloader__wrapper-logo">
    <div class="preloader__logo">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g fill="none" fill-rule="evenodd">
          <rect class="rect" width="100%" height="100%"></rect>
        </g>
      </svg>
      <div class="logo">
        <!-- Customize this text -->
        <div class="logo__text">Arrigo Sabbani</div>
      </div>
    </div>
  </div>
</div>
<!-- - PAGE PRELOADER -->

You can add as many curtains as you want. You can also choose the curtains' background color.

Please check different template pages with dark/light preloader to see how it looks.

Don't need a preloader?

Simply remove the .preloader div container. The page animations will start as soon as possible in that case. No JavaScript adjustments are required.