Page Loading (Pre-Loader)
Learn how to change or remove pre-loading animation.
You can change page pre-loader by replacing below img path with your new pre-loader image path.
<!-- Pre loader -->
<div class="preloader">
<img class="preloader-item" src="assets/images/loader/02.gif" alt="Loading">
</div>
Note: Page Pre-loader are enabled by default. If you wish to disable the page pre-loader you can simply delete above code from all HTML files.
We have provided 7 types of pre-loader options to choose from. Simply copy below code and paste it immediately after body tag in all HTML pages.
Pre loader 1
<!-- Pre loader -->
<div class="preloader">
<img class="preloader-item" src="assets/images/loader/01.gif" alt="Loading">
</div>
Pre loader 2
<!-- Pre loader -->
<div class="preloader">
<img class="preloader-item" src="assets/images/loader/02.gif" alt="Loading">
</div>
Pre loader 3
Good things come to those who wait!
<!-- Pre loader -->
<div class="preloader">
<div class="preloader-item">
<div class="spinner-grow text-primary"></div>
<p class="mt-3">Good things come to those who wait!</p>
</div>
</div>
Pre loader 4
<!-- Pre loader -->
<div class="preloader">
<div class="preloader-item">
<div class="spinner-border"></div>
</div>
</div>
Pre loader 5
<!-- Pre loader -->
<div class="preloader">
<div class="preloader-item">
<i class="fa-3x text-body fas fa-spinner fa-spin"></i>
</div>
</div>
Pre loader 6
Loading...
<!-- Pre loader -->
<div class="preloader">
<div class="preloader-item">
<h2 class="blink-animation text-primary-stroke">Loading...</h2>
</div>
</div>
Pre loader 7
Loading—
Loading—
Loading—
Loading—
Loading—
Loading—
Loading—
Loading—
Loading—
<!-- Pre loader -->
<div class="preloader">
<div class="preloader-item marquee-animation d-flex">
<h3 class="display-3 text-primary-stroke">Loading—</h3>
<h3 class="display-3 text-primary-stroke">Loading—</h3>
<h3 class="display-3 text-primary-stroke">Loading—</h3>
<h3 class="display-3 text-primary-stroke">Loading—</h3>
<h3 class="display-3 text-primary-stroke">Loading—</h3>
<h3 class="display-3 text-primary-stroke">Loading—</h3>
<h3 class="display-3 text-primary-stroke">Loading—</h3>
<h3 class="display-3 text-primary-stroke">Loading—</h3>
<h3 class="display-3 text-primary-stroke">Loading—</h3>
</div>
</div>
Pre loader 8
<!-- Pre loader -->
<div class="preloader">
<div class="preloader-item top-0 start-0 mt-8 ms-4 m-md-8 translate-middle-y">
<div class="h3">
<span class="typed text-primary" data-speed="40" data-back-speed="20" data-type-text="Roll up your sleeves&&Crack your knuckles&&Sharpen the pencil&&Tie up your laces&&Fasten your belt"></span>
</div>
</div>
</div>