Asli

# Preloader

Customization Reference
Edit options in 📄 HTML/js/app.js
Options object 🔧 app.options.preloader
Edit source code in 📄 HTML/js/components/Preloader.js
Edit source code (Gulp) in 📄 SOURCE/components/preloader/Preloader.js

# Default Options

window.app = {
  options: {
    // Other options...
    preloader: {
      timeScale: 1,
      loadingRotation: 90,
      loadingSteps: [
        [20, 40],
        [50, 80],
        [100, 100]
      ],
      finalDelay: 0.4,
      finalOffset: '<20%',
      finalRotation: 180,
      toggleLoadClass: 'preloader_loaded',
    }
  }
}

# HTML Markup

<div
  class="preloader section-fullheight bg-dark-4 text-center"
  id="js-preloader"
  data-arts-color-theme="dark"
  data-arts-component-name="Preloader"
  data-arts-os-animation="true"
>
  <div class="preloader__wrapper js-preloader__wrapper">
    <!-- Fast-sliding images -->
    <div class="preloader__wrapper-images-outer opacity-75 js-preloader__wrapper-images-outer">
      <div class="preloader__wrapper-images-inner js-preloader__wrapper-images-inner">
        ...
      </div>
    </div>
    <!-- - Fast-sliding images -->
    <!-- Heading -->
    <div
      class="preloader__heading js-preloader__heading"
      data-arts-split-text-preset="animatedChars"
    >
      ...
    </div>
    <!-- - Heading -->
    <!-- Counter -->
    <div class="preloader__wrapper-counter display-xl color-accent js-preloader__wrapper-counter">
      ...
    </div>
    <!-- - Counter -->
    <!-- Bottom content -->
    <div
      class="preloader__footer p-gutters"
      data-arts-split-text-preset="animatedLines"
    >
      <!-- Content [before load] -->
      <div class="preloader__loading js-preloader__content-loading">
        ...
      </div>
      <!-- - Content [before load] -->
      <!-- Content [after load] -->
      <div class="js-preloader__content-loaded">
        ...
      </div>
      <!-- - Content [after load] -->
    </div>
    <!-- - Bottom content -->
  </div>
</div>

# Customization

# 1. Disabling Preloader

Simply remove the preloader HTML markup from all the template pages.

# 2. Removing Elements from the Preloader Scene

Before building the animation scene, the component checks what elements are in the HTML markup. Feel free to delete elements you don't need. This will also make the preloader scene shorter.

# 3. Adjusting Animation Speed

Tweak the timeScale multiplier. A value of 0.5 will make the animation run at half speed, while a value of 2.0 will make it run twice as fast.


 












preloader: {
  timeScale: 0.5,
  loadingRotation: 90,
  loadingSteps: [
    [20, 40],
    [50, 80],
    [100, 100]
  ],
  finalDelay: 0.4,
  finalOffset: '<20%',
  finalRotation: 180,
  toggleLoadClass: 'preloader_loaded',
}

# 4. Customizing Steps Counter

The loading steps array defines the schema for how the counter will display the loading numbers. Note that positive counting is supported (from 0 to 100). Consider the examples below:

# Example 4.1




 
 
 
 






preloader: {
  timeScale: 1,
  loadingRotation: 90,
  loadingSteps: [
    [0, 50], // The first step number will be between 0 and 50
    [100, 100] // The last step number will be 100
  ],
  finalDelay: 0.4,
  finalOffset: '<20%',
  finalRotation: 180,
  toggleLoadClass: 'preloader_loaded',
}

# Example 4.2




 
 
 
 
 






preloader: {
  timeScale: 1,
  loadingRotation: 90,
  loadingSteps: [
    [25, 25], // The first step number will be 25
    [50, 50], // The second step number will be 50
    [100, 100] // The last step number will be 100
  ],
  finalDelay: 0.4,
  finalOffset: '<20%',
  finalRotation: 180,
  toggleLoadClass: 'preloader_loaded',
}

# Example 4.3




 
 
 






preloader: {
  timeScale: 1,
  loadingRotation: 90,
  loadingSteps: [
    [100, 100] // Immediate count from 0 to 100
  ],
  finalDelay: 0.4,
  finalOffset: '<20%',
  finalRotation: 180,
  toggleLoadClass: 'preloader_loaded',
}

← Cursor Follower →