Kinsey

# Preloader

The preloader is what you see on the screen while the rest of the page’s content is still loading. Kinsey features a fancy counter and sliding curtain animation that animates out as soon as the site frontend is ready.

# Markup

<!-- PAGE PRELOADER -->
<div 
  class="preloader preloader_header-menu-hidden mask-reveal" 
  id="js-preloader" 
  data-arts-theme-text="light" 
  data-arts-preloader-logo="secondary"
>
  <div class="mask-reveal__layer mask-reveal__layer-1 bg-dark-1">
    <div class="mask-reveal__layer mask-reveal__layer-2">
      <div class="preloader__wrapper">
        <div class="preloader__counter preloader__counter_started me-auto mt-auto underline js-preloader__counter">00%</div>
        <div class="preloader__content ms-auto mt-auto js-preloader__content">
          <div class="h6">Loading</div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- - PAGE PRELOADER -->

# Attributes

  • data-arts-preloader-logo=[primary | secondary] – Specifies the logo version to show in the page header during the preloader animation.
  • data-arts-theme-text=[dark | light] – Specifies the preloader color theme.

# Classes

  • .preloader_header-menu-hidden – Hides the header menu and burger button during the preloader animation while keeping the header logo visible.
  • .preloader_header-hidden – Fully hides the page header during the preloader animation.

# Removing Preloader

If you don't need the website preloader, simply remove its markup from all the pages. The template animations will start as soon as the frontend is fully loaded.

# Showcase

📄 All template pages.

← Header →