Doc - Folio Creative Agency Portfolio Theme

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 is 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 -->
<div class="preloader">
	<img class="preloader-item" src="assets/images/loader/01.gif" alt="Loading">
</div>

Pre loader 2

Result
HTML

<!-- Pre loader -->
<div class="preloader">
	<img class="preloader-item" src="assets/images/loader/02.gif" alt="Loading">
</div>

Pre loader 3

Result
HTML

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

Result
HTML

<!-- Pre loader -->
<div class="preloader">
	<div class="preloader-item">
		<div class="spinner-border"></div>
	</div>
</div>

Pre loader 5

Result
HTML

<!-- 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

Result
HTML

Loading...

<!-- Pre loader -->
<div class="preloader">
	<div class="preloader-item">
		<h2 class="blink-animation text-primary-stroke">Loading...</h2>
	</div>
</div>

Pre loader 7

Result
HTML

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

Result
HTML

<!-- 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>