LoftLoader jQuery Documentation v1.1.0

* Important Changes

In this chapter, we will list the important changes we made in the updates that may affect your code customizations.

* Version 1.0.7 - release on 2018 November

Loader - Custom Image Loading (loader_type: 'imgloading')

The old HTML of this loader:


<div id="loftloader-wrapper" class="pl-imgloading once horizontal imgloading-horizontal end-split-h">
	<div class="loader-inner">
		<div id="loader">
			<span style="background-image: url("images/loaderpetal.png"); width: 50%;"></span>
			<img src="images/loaderpetal.png">
		</div>
	</div>
</div>

The new HTML of this loader:


<div id="loftloader-wrapper" class="pl-imgloading once horizontal imgloading-horizontal end-split-h">
	<div class="loader-inner">
		<div id="loader">
			<div class="imgloading-container" style="width: 50%;">
				<span style="background-image: url("images/loaderpetal.png"); width: 240px; height: 64.375px;"></span>
			</div>
			<img src="images/loaderpetal.png">
		</div>
	</div>
</div>

The differences:

Inside of <div id="loader">, we added a new <div class="imgloading-container"> to wrap the <span style="background-image: ..."</span>.
During the loading process, the inline CSS code ("width: xx%") which changes the loader width (for creating the loading effect) has been moved from <span style="background-image: ..."</span> to the new <div class="imgloading-container">.
Based on the value given to loader_image_width, inline width and height values will be added to <span style="background-image: ..."</span>.
Related CSS code have been changed.

Why we made these changes:

The loader image moves/shakes slightly while loading, we changed the HTML structure to fix this problem so that the animation will run smoothly.

1. Getting Started

LoftLoader jQuery is a plugin to add a preloader/loading screen to your website. It is based on jQuery, with loads of options, and fully customizable.

To add LoftLoader to your website, first you need to download the plugin file from CodeCanyon, and find loftloader-jquery.zip in it and unzip it.

There are 17 html files, each shows one example of LoftLoader. You can open any one of the 17 html files in a text editor and check the code as reference.

You will need to include these files in your own html files.

<link href="css/loftloader.css" rel="stylesheet">
<script src="js/libs/jquery.min.js"></script>
<script src="js/loftloader.min.js"></script>

Please note:

Please put the two js files in the < head > tag so LoftLoader can be executed as soon as possible.
And please put "loftloader.min.js" after "jquery.min.js".
You only need one jquery script file to use LoftLoader. If your site already includes one, for example, "jquery-3.2.1.min.js", then you don't need to include the "jquery.min.js" file that comes along with the downloaded package.

Then add this div element right below the opening < body > tag in your html page.

<div id="loftloader-wrapper"></div>

And call .loftloader( ) on it:

$('#loftloader-wrapper').loftloader();

Done. Now refresh your html page you will see a pre-loader with default settings appears, but it might end and disappear very fast if your html page doesn’t have much content (images) on it.

We can override some options, like this:

$('#loftloader-wrapper').loftloader({
	load_time: 5,
});

This option load_time sets a minimum load time to the pre-loader. The unit is second. Refresh your html page, now you can see the pre-loader clearly - it will show at least 5 seconds before closing the loading screen.

We will go through all of the options in the following chapters.

2. Options

LoftLoader creates a loading screen that might be consisted of:

Background
Loader
Progress Indicator
Custom Message

You can enable or disable any one of the 4 types of elements. Also can mix them together.

2.1 Background Options

2.1.1 Background Type

bg_type

Type: String

Default: 'solid'

Controls the loading screen background’s type.

Possible values:

'solid': The loading screen will have a background filled with a solid color.
'image': The loading screen will have a background image.
'none': The loading screen will NOT have the background.

Code Example:

$('#loftloader-wrapper').loftloader({
	bg_type: 'none'
});

Please note: Background options listed below only work when bg_type set to ‘solid’ (the default value) or ‘image’.

2.1.2 Background Color

bg_color

Type: String

Default: '#ffffff'

Controls the loading screen background color.

Possible values:

a HEX value - like '#ff0000'.

Code Example:

$('#loftloader-wrapper').loftloader({
	bg_type: 'solid',
	bg_color: '#ffffff'
});

2.1.3 Background Opacity

bg_opacity

Type: Number

Default: 0.95

Controls the loading screen background opacity.

Possible values:

0 to 1. 0 is 100% transparent. 1 is 100% nontransparent.

Code Example:

$('#loftloader-wrapper').loftloader({
	bg_color: '#ff0000',
	bg_opacity: 0.85
});

2.1.4 Background Image

bg_image & mobile_bg_image only works when bg_type is 'image'.

bg_image

Type: String

Default: ''

Allows to add an image as background.

Possible values:

A source URL of an image - like 'images/bg-pattern.jpg'

Code Example:

$('#loftloader-wrapper').loftloader({
	bg_type: 'image',
	bg_image: 'images/bg-pattern.jpg'
});

mobile_bg_image

Type: String

Default: ''

Allows to add an image as background that are only displayed on mobile devices.

Possible values:

'': - Default. The loading screen will use the same background image ('bg_image') on all devices.
A source URL of an image - like 'images/bg-pattern-mobile.jpg'

Code Example:

$('#loftloader-wrapper').loftloader({
	bg_type: 'image',
	bg_image: 'images/bg-pattern.jpg',
    mobile_bg_image: 'images/bg-pattern-mobile.jpg'
});

2.1.5 Background Image Repeat

bg_image_repeat only works when bg_type is 'image'.

bg_image_repeat

Type: String

Default: ''

Decides to use the background image as a full background image or a repeating pattern.

Possible values:

'': The background image will be used as a full background image (no repeat).
'tile': The background image will be repeated both vertically and horizontally.

Code Example:

$('#loftloader-wrapper').loftloader({
	bg_type: 'image',
	bg_image: 'images/bg-pattern.jpg',
	bg_image_repeat: 'tile'
});

2.1.6 Background Image Size

bg_image_size only works when bg_type is 'image' and bg_image_repeat is '' (empty).

bg_image_size

Type: String

Default: 'cover'

Specifies the size of the background image.

Possible values:

'cover': The background image will be resized to cover the entire loading screen (the image might be stretched, or cut a little bit off one of the edges).
'contain': The background image will be resized to ensure the image is fully visible.

Code Example:

$('#loftloader-wrapper').loftloader({
	bg_type: 'image',
	bg_image: 'images/bg-pattern.jpg',
	bg_image_repeat: '',
	bg_image_size: 'contain'
});

2.1.7 Background Animation

bg_animation

Type: String

Default: 'split-h'

Controls the ending animation of the loading screen’s background.

Possible values:

'fade': The loading screen will fade out.
'split-h': The loading screen will split horizontally and slide out.
'split-v': The loading screen will split vertically and slide out.
'up': The loading screen will slide out vertically from bottom to top.
'down': The loading screen will slide out vertically from top to bottom.
'left': The loading screen will slide out vertically from right to left.
'right': The loading screen will slide out vertically from left to right.
'shrink-fade': The loading screen will shrink then fade out.
'split-reveal-v': The loading screen will split and then left half will slide up while right half will slide down.
'split-reveal-h': The loading screen will split and then upper half will slide left while lower half will slide right.
'split-diagonally-h': The loading screen will split horizontally at an angle and slide out.
'split-diagonally-v': The loading screen will split vertically at an angle and slide out.

Code Example:

$('#loftloader-wrapper').loftloader({
	bg_animation: 'fade'
});

Please note:

These 2 ending animations - 'split-diagonally-h' and 'split-diagonally-v' - are more like experimental effects – we created them with CSS "clip-path" property, and this property is not supported by all browsers.

According to Can I Use, so far the following browsers do not support "clip-path":

IE
Edge
Opera Mini

If your site has many visitors using any of the 3 browsers, you might like to select another ending animation for your preloader.

2.1.8 Gradient Background Enable

bg_gradient only works when bg_type is 'solid'. (If set to 'image', then all options for gradient background color will not work.)

bg_gradient

Type: Boolean

Default: false

Allows to apply a gradient background color to the loading screen.

Possible values:

false: Doesn’t allow to use a gradient color as the loading screen’s background.
true: Allows to apply a gradient background color to the loading screen.

Code Example:

$('#loftloader-wrapper').loftloader({
	bg_type: 'solid',
	bg_gradient: true
});

2.1.9 Gradient Background Start Color

bg_gradient_start_color

Type: String

Default: '#ffffff'

Controls the loading screen gradient background start color.

Possible values:

a HEX value - like '#ff0000'.

Code Example:

$('#loftloader-wrapper').loftloader({
	bg_gradient: true,
	bg_gradient_start_color: '#5ae8ed'
});

2.1.10 Gradient Background End Color

bg_gradient_end_color

Type: String

Default: '#ffffff'

Controls the loading screen gradient background end color.

Possible values:

a HEX value - like '#ff0000'.

Code Example:

$('#loftloader-wrapper').loftloader({
	bg_gradient: true,
	bg_gradient_start_color: '#5ae8ed',
	bg_gradient_end_color: '#d877b8'
});

2.1.11 Gradient Angel

bg_gradient_angel

Type: Number

Default: 0

Controls the loading screen background gradient angel.

Possible values:

0 to 360

Code Example:

$('#loftloader-wrapper').loftloader({
	bg_gradient: true,
	bg_gradient_start_color: '#5ae8ed',
	bg_gradient_end_color: '#d877b8',
	bg_gradient_angel: 45
});

2.2 Loader Options

2.2.1 Loader Type

loader_type

Type: String

Default: 'sun'

Controls the loader type.

Possible values:

'none': The loading screen will NOT have a loader.
'sun': The loader will be a spinning sun.
'luminous': The loader will be 3 luminous circles.
'wave': The loader will be an animated waves.
'square': The loader will be a spinning square.
'ducks': The loader will be a group of moving ducks.
'crystal': The loader will be a spinning crystal ring.
'circlefilling': The loader will be a circle with filling effect.
'waterfilling': The loader will be a circle with water filling effect.
'petals': The loader will be a flower with its petals pop up one by one.
'crossing': The loader will be 2 circles running towards and crossing.
'rainbow': The loader will be an animated rainbow.
'frame': The loader will be a frame with an animation of drawing and erasing its borders, and allow to put a custom image inside of the frame.
'beating': The loader will be 2 overlapped beating circles.
'imgloading': The loader will create a loading animation of a custom image.
'imgrotating': The loader will create a rotating animation of a custom image.
'imgbouncing': The loader will create a bouncing animation of a custom image.
'imgstatic': The loader will allow to add a custom image without any animation.
'imgfading': The loader will create a fading in & out animation of a custom image.
'incomplete-ring': The loader will be a spinning incomplete ring.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'sun'
});

We will go through the options for each loader type in the following sub chapters.

2.2.2 Option for loader_type 'sun' / 'luminous' / 'wave' / 'square' / 'ducks' / 'crystal' / 'beating'

The loader_type 'sun' / 'luminous' / 'wave' / 'square' / 'ducks' / 'crystal' / 'beating' only has one option: loader_color.

loader_color

Type: String

Default: '#248acc'

Controls the loader’s color.

Possible values:

a HEX value - like '#ff0000'.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'sun',
	loader_color: '#248acc'
});

2.2.3 Option for loader_type 'circlefilling' / 'waterfilling' / 'petals'

The loader_type 'circlefilling' / 'waterfilling' / 'petals' has 2 options: loader_color and loader_looping.

loader_color

Type: String

Default: '#248acc'

Controls the loader’s color.

Possible values:

a HEX value - like '#ff0000'.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'waterfilling',
	loader_color: '#248acc'
});

loader_looping

Type: String

Default: 'forever'

Controls the loader’s looping style.

Possible values:

'forever': The loader will loop forever.
'once': The loader will only loop once and end when the loading is completed.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'waterfilling',
	loader_color: '#248acc',
	loader_looping: 'once'
});

2.2.4 Option for loader_type 'crossing'

The loader_type 'crossing' has 3 options: loader_left_color, loader_right_color and loader_blendmode.

The loader is 2 circles running towards and crossing. So you can apply different color to each circle.

loader_left_color

Type: String

Default: '#00ffff'

Controls the left circle’s color.

Possible values:

a HEX value - like '#ff0000'.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'crossing',
	loader_left_color: '#00ffff'
});

loader_right_color

Type: String

Default: '#ff0000'

Controls the left circle’s color.

Possible values:

a HEX value - like '#ff0000'.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'crossing',
	loader_right_color: '#ff0000'
});

loader_blendmode

Type: String

Default: 'lighten'

Controls the blend mode of the 2 circles when they are overlapped.

Possible values:

'lighten': The overlapped part will be lightened.
'darken': The overlapped part will be darkened.
'none': The loader will not have a blend mode.

Note:

Not supported well in some browsers. Please check http://caniuse.com/#search=mix-blend-mode for more details.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'crossing',
	loader_left_color: '#00ffff',
	loader_right_color: '#ff0000',
	loader_blendmode: 'lighten'
});

It will look like this when the 2 circles are overlapped:

Loader - Crossing - Blend Mode: Lighten.

2.2.5 Option for loader_type 'rainbow'

The loader_type 'rainbow' created a rainbow which is consisted of 3 colors. It has 4 options: loader_rainbow_outer_color, loader_rainbow_middle_color, loader_rainbow_inner_color and loader_looping.

loader_rainbow_outer_color

Type: String

Default: '#00ffff'

Controls the rainbow’s outer color.

Possible values:

a HEX value - like '#00ffff'.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'rainbow',
	loader_rainbow_outer_color: '#00ffff'
});

loader_rainbow_middle_color

Type: String

Default: '#ffd700'

Controls the rainbow’s middle color.

Possible values:

a HEX value - like '#ffd700'.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'rainbow',
	loader_rainbow_middle_color: '#ffd700'
});

loader_rainbow_inner_color

Type: String

Default: '#ff0000'

Controls the rainbow’s inner color.

Possible values:

a HEX value - like '#ff0000'.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'rainbow',
	loader_rainbow_inner_color: '#ff0000'
});

loader_looping

Type: String

Default: 'forever'

Controls the loader’s looping style.

Possible values:

'forever': The loader will loop forever.
'once': The loader will only loop once and end when the loading is completed.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'rainbow',
	loader_rainbow_outer_color: '#00ffff',
	loader_rainbow_middle_color: '#ffd700',
	loader_rainbow_inner_color: ‘#ff0000',
	loader_looping: 'once'
});

2.2.6 Option for loader_type 'frame'

The loader_type 'frame' has 5 options: frame_width, frame_height, frame_border, loader_color and loader_image.

frame_width

Type: String

Default: '80px'

Controls the frame width.

Possible values:

A pixel value - like ‘100px’

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'frame',
	frame_width: '100px'
});

frame_height

Type: String

Default: '80px'

Controls the frame height.

Possible values:

A pixel value - like ‘100px’

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'frame',
	frame_width: '100px',
	frame_height: '100px'
});

frame_border

Type: String

Default: '4px'

Controls the frame border width.

Possible values:

A pixel value - like ‘2px’

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'frame',
	frame_width: '100px',
	frame_height: '100px',
	frame_border: '2px'
});

loader_color

Type: String

Default: '#248acc'

Controls the loader’s color.

Possible values:

a HEX value - like '#ff0000'.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'frame',
	frame_width: '100px',
	frame_height: '100px',
	frame_border: '2px',
	loader_color: '#248acc'
});

loader_image

Type: String

Default: 'images/loftloader-logo.png'

Allows to add an image inside of the frame.

Possible values:

A source URL of an image - like ‘images/loftloader-logo.png’
'' : Remove the image and only shows the frame.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'frame',
	frame_width: '100px',
	frame_height: '100px',
	frame_border: '2px',
	loader_color: '#00ffff',
	loader_image: ''
});

2.2.7 Option for loader_type 'imgloading'

The loader_type 'imgloading' has 4 options: loader_image, loader_image_width, loader_direction and loader_looping.

And when loader_direction is 'vertical', there is an extra option: loader_vertical_direction.

loader_image

Type: String

Default: 'images/loftloader-logo.png'

Adds an image to show the loader.

Possible values:

A source URL of an image - like ‘images/loftloader-logo.png’

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgloading',
	loader_image: 'images/loftloader-logo.png'
});

loader_image_width

Type: String

Default: '80px'

Controls the image width.

Possible values:

A pixel value - like ‘100px’

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgloading',
	loader_image: 'images/loftloader-logo.png',
	loader_image_width: '100px'
});

loader_direction

Type: String

Default: 'horizontal'

Controls the loading direction of the image.

Possible values:

‘horizontal’: The image will be loaded horizontally.
‘vertical’: The image will be loaded vertically.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgloading',
	loader_image: 'images/loftloader-logo.png',
	loader_image_width: '100px',
	loader_direction: 'vertical'
});

loader_vertical_direction

This option only works when loader_direction is 'vertical'.

Type: String

Default: ''

Controls the vertical loading direction of the image: from bottom to top, or vice versa.

Possible values:

'': The image will be loaded vertically and from bottom to top.
'top-to-bottom': The image will be loaded vertically and from top to bottom.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgloading',
	loader_image: 'images/loftloader-logo.png',
	loader_image_width: '100px',
	loader_direction: 'vertical',
	loader_vertical_direction: 'top-to-bottom'
});

loader_looping

Type: String

Default: 'forever'

Controls the loader’s looping style.

Possible values:

'forever': The loader will loop forever.
'once': The loader will only loop once and end when the loading is completed.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgloading',
	loader_image: 'images/loftloader-logo.png',
	loader_image_width: '100px',
	loader_direction: 'vertical',
	loader_looping: 'once'
});

2.2.8 Option for loader_type 'imgrotating'

The loader_type 'imgrotating' has 4 options: loader_image, loader_image_width, loader_rotate_direction and loader_rotate_curve.

And when loader_rotate_direction is '2d', there is an extra option: loader_rotation.

loader_image

Type: String

Default: 'images/loftloader-logo.png'

Adds an image to show the loader.

Possible values:

A source URL of an image - like ‘images/loftloader-logo.png’

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgrotating',
	loader_image: 'images/loftloader-logo.png'
});

loader_image_width

Type: String

Default: '80px'

Controls the image width.

Possible values:

A pixel value - like ‘100px’

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgrotating',
	loader_image: 'images/loftloader-logo.png',
	loader_image_width: '100px'
});

loader_rotate_direction

Type: String

Default: '2d'

Controls the direction of rotation of the image.

Possible values:

‘2d’: It will rotate the image clockwise.
‘3d-x’: It will rotate the image around its X-axis.
‘3d-y’: It will rotate the image around its Y-axis.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgrotating',
	loader_image: 'images/loftloader-logo.png',
	loader_image_width: '100px',
	loader_rotate_direction: '2d'
});

loader_rotation

This option only works when loader_rotate_direction is '2d'.

Type: String

Default: '2d'

Controls the 2D rotation of the image.

Possible values:

'clockwise': It will rotate the image clockwise.
'counterclockwise': It will rotate the image counterclockwise.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgrotating',
	loader_image: 'images/loftloader-logo.png',
	loader_image_width: '100px',
	loader_rotate_direction: '2d',
	loader_rotate_direction: 'counterclockwise'
});

loader_rotate_curve

Type: String

Default: ''

Controls the rotating speed curve of the image.

Possible values:

'': The image will rotate in the same speed.
'ease-back': The image will rotate slower at the end and rotate a little bit in a reverse direction, then start again.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgrotating',
	loader_image: 'images/loftloader-logo.png',
	loader_image_width: '100px',
	loader_rotate_direction: '2d',
	loader_rotate_curve: 'ease-back'
});

2.2.9 Option for loader_type 'imgbouncing'

The loader_type 'imgbouncing' has 3 options: loader_image, loader_image_width and loader_bounce_rolling.

loader_image

Type: String

Default: 'images/loftloader-logo.png'

Adds an image to show the loader.

Possible values:

A source URL of an image - like ‘images/loftloader-logo.png’

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgbouncing',
	loader_image: 'images/loftloader-logo.png'
});

loader_image_width

Type: String

Default: '80px'

Controls the image width.

Possible values:

A pixel value - like ‘100px’

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgbouncing',
	loader_image: 'images/loftloader-logo.png',
	loader_image_width: '100px'
});

loader_bounce_rolling

Type: Boolean

Default: false

Controls the rolling movement of the image.

Possible values:

false: The image will not roll.
true: The image will roll while bouncing.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgbouncing',
	loader_image: 'images/loftloader-logo.png',
	loader_image_width: '100px',
	loader_bounce_rolling: true
});

2.2.10 Option for loader_type 'imgstatic'

The loader_type 'imgstatic' has 2 options: loader_image and loader_image_width.

loader_image

Type: String

Default: 'images/loftloader-logo.png'

Adds an image to show the loader.

Possible values:

A source URL of an image - like ‘images/loftloader-logo.png’

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgstatic',
	loader_image: 'images/loftloader-logo.png'
});

loader_image_width

Type: String

Default: '80px'

Controls the image width.

Possible values:

A pixel value - like ‘100px’

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgstatic',
	loader_image: 'images/loftloader-logo.png',
	loader_image_width: '100px'
});

2.2.11 Option for loader_type 'imgfading'

The loader_type 'imgfading' has 2 options: loader_image and loader_image_width.

loader_image

Type: String

Default: 'images/loftloader-logo.png'

Adds an image to show the loader.

Possible values:

A source URL of an image - like ‘images/loftloader-logo.png’

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgfading',
	loader_image: 'images/loftloader-logo.png'
});

loader_image_width

Type: String

Default: '80px'

Controls the image width.

Possible values:

A pixel value - like ‘100px’

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgfading',
	loader_image: 'images/loftloader-logo.png',
	loader_image_width: '100px'
});

2.2.12 Custom Image Max Width

This new option loader_image_responsive_max_width is only for loader_type: 'imgloading', 'imgbouncing', 'imgstatic', 'imgfading' and 'imgrotating'.

loader_image_responsive_max_width

Type: Integer

Default: 100

Controls the max width of the custom image loader.

Possible values: 1 to 100 ('%' will be added automatically)

'50' - The loader image max width will not exceed 50% of the screen width.

Code Example:

$('#loftloader-wrapper').loftloader({
	loader_type: 'imgfading',
	loader_image: 'images/loftloader-logo.png',
	loader_image_responsive_max_width: '50'
});

2.3 Progress Options

2.3.1 Progress Type

progress_type

Type: String

Default: 'none'

Controls the progress indicator’s type.

Possible values:

'none': The loading screen will NOT have a progress indicator.
'bar': The loading screen will show a progress bar.
'number': The loading screen will show a counting percentage number.
'bar-number': The loading screen will show a progress bar with a counting percentage number.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'bar'
});

2.3.2 Option for progress_type 'bar'

The progress_type ‘bar’ has 4 options: progress_bar_position, progress_bar_width, progress_bar_height and progress_color.

progress_bar_position

Type: String

Default: 'middle'

Controls the progress bar’s position.

Possible values:

'top': The progress bar will sit on screen top.
'middle': The progress bar will sit in the middle of the screen, just below the loader (if loader is enabled).
'bottom': The progress bar will sit on screen bottom.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'bar',
	progress_bar_position: 'top'
});

progress_bar_width

Type: String

Default: '30vw'

Controls the progress bar’s width.

Possible values:

A pixel value - like '100px'.
A viewport width value - like '100vw'.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'bar',
	progress_bar_position: 'top',
	progress_bar_width: '100vw'
});

progress_bar_height

Type: String

Default: '10px'

Controls the progress bar’s height.

Possible values:

A pixel value - like '5px'.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'bar',
	progress_bar_position: 'top',
	progress_bar_width: '100vw',
	progress_bar_height: '5px'
});

progress_color

Type: String

Default: '#248acc'

Controls the color of the progress indicator (bar or number).

Possible values:

a HEX value - like '#ff0000'.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'bar',
	progress_bar_position: 'top',
	progress_bar_width: '100vw',
	progress_bar_height: '5px',
	progress_color: '#21d3d3'
});

2.3.3 Option for progress_type 'number'

The progress_type 'number' has 4 options: progress_number_position, progress_number_layer, progress_number_font_size and progress_color.

progress_number_position

Type: String

Default: 'middle'

Controls the counting percentage number’s position.

Possible values:

'middle': The counting percentage number will sit in the middle of the loader area.
'below': The counting percentage number will sit just below the loader.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'number',
	progress_number_position: 'below'
});

progress_number_layer

Type: String

Default: 'front'

Controls the counting percentage number’s layer, works when progress_number_position is set to ‘middle’.

Possible values:

'front': The counting percentage number will sit on the front layer of the loader.
'back': The counting percentage number will sit on the back layer of the loader.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'number',
	progress_number_position: 'middle',
	progress_number_layer: 'back'
});

progress_number_font_size

Type: String

Default: '16px'

Controls the counting percentage number’s font size.

Possible values:

A pixel value - like '20px'.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'number',
	progress_number_position: 'below',
	progress_number_font_size: '88px'
});

progress_color

Type: String

Default: '#248acc'

Controls the color of the progress indicator (bar or number).

Possible values:

a HEX value - like '#ff0000'.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'number',
	progress_number_position: 'below',
	progress_number_font_size: '88px',
	progress_color: '#21d3d3'
});

2.3.4 Option for progress_type 'bar-number'

The progress_type ‘bar-number’ has 5 options: progress_bar_position, progress_bar_width, progress_bar_height, progress_color and progress_number_font_size.

progress_bar_position

Type: String

Default: 'middle'

Controls the progress bar’s position.

Possible values:

'top': The progress bar will sit on screen top.
'middle': The progress bar will sit in the middle of the screen, just below the loader (if loader is enabled).
'bottom': The progress bar will sit on screen bottom.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'bar-number',
	progress_bar_position: 'top'
});

progress_bar_width

Type: String

Default: '30vw'

Controls the progress bar’s width.

Possible values:

A pixel value - like '100px'.
A viewport width value - like '100vw'.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'bar-number',
	progress_bar_position: 'top',
	progress_bar_width: '100vw'
});

progress_bar_height

Type: String

Default: '10px'

Controls the progress bar’s height.

Possible values:

A pixel value - like '5px'.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'bar-number',
	progress_bar_position: 'top',
	progress_bar_width: '100vw',
	progress_bar_height: '5px'
});

progress_color

Type: String

Default: '#248acc'

Controls the color of the progress indicator (bar & number both).

Possible values:

a HEX value - like '#ff0000'.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'bar-number',
	progress_bar_position: 'top',
	progress_bar_width: '100vw',
	progress_bar_height: '5px',
	progress_color: '#21d3d3'
});

progress_number_font_size

Type: String

Default: '16px'

Controls the counting percentage number’s font size.

Possible values:

A pixel value - like '20px'.

Code Example:

$('#loftloader-wrapper').loftloader({
	progress_type: 'bar-number',
	progress_bar_position: 'top',
	progress_bar_width: '100vw',
	progress_bar_height: '5px',
	progress_color: '#21d3d3',
	progress_number_font_size: '24px'
});

2.3.5 Counting Number Font CSS

Users often use the site default font for loader's text. You can control the font size and color by JS, but if you want to change more for the text font then we suggest write some custom CSS to style the counting number text.

For example, let's apply some extra font settings to the counting number:

Google font "Alice" ( Alice Font )
Font weight: bold
Letter spacing: 0.2em

Then please follow steps below:

Embed the font into your webpage - add the code into the of your HTML document:
```
<link href="https://fonts.googleapis.com/css?family=Alice" rel="stylesheet">
```
or embed with @IMPORT. Just follow guide on Google Font page.

Add CSS for progress_type 'number':

#loftloader-wrapper span.percentage {
    font-family: Alice;
    font-weight: 800;
    letter-spacing: 0.2em;
}

Or add CSS for progress_type ‘bar-number’:

#loftloader-wrapper span.bar span.load-count {
    font-family: Alice;
    font-weight: 800;
    letter-spacing: 0.2em;
}

Done. Or you can add more styles, like text shadow, italic style, margin, line height and more.

2.4 Message Options

2.4.1 Message Content

message_text

Type: String

Default: '' (empty string)

Custom message content.

Possible values:

Any string - like 'Content is loading'.
'' - Empty string. The loading screen will NOT show any message.

Code Example:

$('#loftloader-wrapper').loftloader({
	message_text: ‘Welcome!’
});

2.4.2 Message Font Size

message_size

Type: String

Default: '16px'

Controls the custom message’s font size.

Possible values:

A pixel value - like '20px'.

Code Example:

$('#loftloader-wrapper').loftloader({
	message_text: 'Welcome!',
	message_size: '24px'
});

2.4.3 Message Color

message_color

Type: String

Default: '#248acc'

Controls the color of the custom message.

Possible values:

a HEX value - like '#ff0000'.

Code Example:

$('#loftloader-wrapper').loftloader({
	message_text: 'Welcome!',
	message_size: '24px',
	message_color: '#21d3de'
});

2.4.4 Message Position

message_position

Type: String

Default: 'bottom'

Controls the custom message’s position.

Possible values:

'top': The custom message will show above other elements, except there is a progress loading bar and its position is 'top'.
'middle': The custom message will show below the loader and above the progress indicator, except it's a progress loading bar and its position is 'top'.
'bottom': The custom message will show below other elements, except there is a progress loading bar and its position is 'bottom'.

Code Example:

$('#loftloader-wrapper').loftloader({
	message_text: 'Welcome!',
	message_size: '24px',
	message_color: '#21d3de',
	message_position: 'top'
});

2.4.5 Random Message

This is a new feature added in version 1.1.0.

random_message

Type: Array or Boolean

Default: false

Random message content. Entered messages will be displayed randomly each time the page is refreshed/loaded.

Possible values:

false - The feature is disabled.
Array of string - like ['Welcome!', 'Hello.', 'Content is loading...'].

Code Example:

$('#loftloader-wrapper').loftloader({
	random_message: ['Welcome!', 'Hello.', 'Content is loading...']
});

Note: This attribute overrides 'message_text'. So you don't need to use 'message_text' if you want to enable the Random Message feature.

2.4.6 Message Font CSS

Users often use the site default font for loader's custom message text. You can control the font size and color by JS, but if you want to change more for the text font then we suggest write some custom CSS to style the message.

For example, let's apply some extra font settings to the loader message:

Google font "Alice" ( Alice Font )
Font weight: bold
Letter spacing: 0.2em

Then please follow steps below:

Embed the font into your webpage - add the code into the of your HTML document:
```
<link href="https://fonts.googleapis.com/css?family=Alice" rel="stylesheet">
```
or embed with @IMPORT. Just follow guide on Google Font page.

Add CSS for the font:

div#loftloader-wrapper .loader-message {
    font-family: Alice;
    font-weight: 800;
    letter-spacing: 0.2em;
}

Done. Or you can add more styles, like text shadow, italic style, margin, line height and more.

2.5 Load Time Option

2.5.1 Minimum Load Time

load_time

Type: Number or Boolean

Default: false

Controls the minimum load time of the pre-loader.

Possible values:

false - No minimum load time.
Number - like 5. The unit is second. The elements on the loading screen will show at least 5 seconds before closing.

Code Example:

$('#loftloader-wrapper').loftloader({
	load_time: 5
});

2.5.2 Maximum Load Time

maximum_load_time

Type: Number or Boolean

Default: false

Controls the maximum load time of the pre-loader.

Possible values:

false - No maximum load time.
Number - like 10. The unit is second. Elements on loading screens display for up to 10 seconds before closing. If it takes more than 10 seconds to load the page, it will automatically close after 10 seconds. If it doesn't take 10 seconds to load the page, for example, it only takes 3 seconds, then after 3 seconds the loading screen will close when the loading is complete.

Code Example:

$('#loftloader-wrapper').loftloader({
	maximum_load_time: 10
});

2.6 Device Control

device

Type: String

Default: 'all'

Controls on which types of devices to show the loading screen.

Possible values:

'all': The loading screen will show on all devices.
'desktop': The loading screen will only show on desktop, will be hidden on mobile.
'mobile': The loading screen will only show on mobile devices.

Code Example:

$('#loftloader-wrapper').loftloader({
	device: 'all'
});

2.7 Smooth Page Transition

When enable this feature, every time when click on an internal link on your site, the loading screen background will appear again before leaving the current page with animation. Check the demo created by WordPress version.

For example, if your loading screen's ending effect is "Fade Out" (bg_animation is "fade"), then when you click on a link to go to another page on the same site, the loading screen background will show again: with a "Fade In" animation.

Please note: this is an advanced feature, please follow the guide below to use it and get the best result:

Use the same loader on one site.
Make sure every page on your site has a (same) loading screen.
The loading screen needs a background. Can be solid color, gradient color, or backgound image.
It would be better not to use a semi-transparent loader background.

And please note: this feature WILL NOT work for the situations listed below:

When the link is an external link.
When open the link in a new tab/window.
When your loading screen doesn’t have a background.

There are 3 options for this feature: smooth_page_transition, site_root_url and exclude_elements.

smooth_page_transition

Type: Boolean

Default: false

Controls to enable or disable the feature.

Possible values:

false: Disable Smooth Page Transition feature on the site.
true: Enable Smooth Page Transition feature on the site.

Code Example:

$('#loftloader-wrapper').loftloader({
	smooth_page_transition: true
});

site_root_url

Type: String

Default: ''

Please provide your site URL to let the script know where to enable the Smooth Page Transition feature. So when a link pointing to an outer site, the feature will not work.

Possible values:

A site root URL - like 'http://yoursitedomain.com' or 'http://yoursitedomain.com/sub-domain'

Code Example:

$('#loftloader-wrapper').loftloader({
	smooth_page_transition: true,
	site_root_url: 'http://www.loftocean.com/loftloader/'
});

Please note: to enable this feature, please:

smooth_page_transition - The value must be 'true';
site_root_url - Value cannot be empty. Please always give a site URL to enable this feature.

The option exclude_elements is optional for using Smooth Page Transition feature.

When and how to use it:

There might be some internal <a> links you would like to disable this feature when click on them.
You will need to give these internal <a> links a class name, then use this class name to find and exclude these links.
You can also use ids or names to exclude these links.

exclude_elements

Type: String or Boolean

Default: false

Controls which <a>links</a> will be excluded for Smooth Page Transition feature.

Possible values:

false - All internal links will use Smooth Page Transition feature.
a tag with class name, like 'a.exclude-link'
a tag with an id, like 'a#exclude-this-link'
a tag with a name, like 'a[name="exclude-link"]'

Code Example:

$('#loftloader-wrapper').loftloader({
	smooth_page_transition: true,
	site_root_url: 'http://www.loftocean.com/loftloader/',
	exclude_elements: 'a.exclude-link'
});

2.8 Once Per Session

This is a new feature since v1.0.6. When enable this feature, the pre-loader will display once only when a visitor first visits your site. When this visitor leaves your site, and comes back later (after a week), the loader will show once again.

You can choose to:

Display the pre-loader once only when a visitor first visits your site. It could be any page.
Or, display the pre-loader once only on a page when a visitor first visits that page.

There are 2 options for this feature: once_per_session, and site_root_url.

once_per_session

Type: Boolean or String

Default: false

Controls to enable or disable "Once Per Session", and which type of this feature to enable.

Possible values:

false: Disable Once Per Session feature on the site.
site: Enable Once Per Session feature on the site, and display the pre-loader only once on the first page a visitor arrives at when they visit your site, it could be any page.
page: Enable Once Per Session feature on the site, and display the pre-loader only once on a page when a visitor arrives at that page (if that page has a pre-loader).

Code Example:

$('#loftloader-wrapper').loftloader({
	once_per_session: 'page'
});

site_root_url

Type: String

Default: ''

Please provide your site URL to let the script know where to enable the Once Per Session feature. If the value is empty, the feature will not work.

Possible values:

A site root URL - like 'http://yoursitedomain.com' or 'http://yoursitedomain.com/sub-domain'

Code Example:

$('#loftloader-wrapper').loftloader({
	once_per_session: 'site',
	site_root_url: 'http://www.loftocean.com/loftloader/'
});

Please note:

site_root_url - Value cannot be empty. Please always give a site URL to enable this feature.
We use PHP Session for the feature in WordPress version. But this is the jQuery version so we use cookies here.
In WordPress version a session expires when a user closes his/her browser. But LoftLoader jQuery creates a cookie that expires 7 days from the first time a visitor arrives at your site.
Cookies can be deleted by a user because cookies are stored on client's computer.

2.9 Close Button

This is a new feature since v1.0.7.

The loading screen created by LoftLoader only disappears when the preload process is completed. Therefore, if the preload process takes too long (for example, in a slow network environment), visitors have to wait a long time to access the page content. That's why we added this close button: visitors can click the close button to exit the loading screen if they don't want to wait.

There are 2 options for this feature: close_button_timer, and close_button_message.

close_button_timer

Type: Number or Boolean

Default: 'false'

Controls whether to enable or disable the "Close Button", and when to display the close button.

Possible values:

Number - like 10. The unit is second. The close button shows 10 seconds after loading starts.
false: Disable the close button.

Code Example:

$('#loftloader-wrapper').loftloader({
	close_button_timer: 10
});

close_button_message

Type: String

Default: ''

Custom text on the close button.

Possible values:

'': Leave it empty to display a "x" symbol only.
Any string - like: 'Still loading? Close & Continue'. The string will show before the "x" symbol.

Code Example:

$('#loftloader-wrapper').loftloader({
	close_button_timer: 10,
	close_button_message: 'Close'
});

2.10 Disable Page Scrolling

Enable this the option then your page will be not able to scroll during the loading process. This feature is for preventing your visitors from accidentally scroll to the middle of the page before the loading process is complete.

disable_page_scrolling

Type: String

Default: ''

Controls to enable/disable Page Scrolling while loading.

Possible values:

'': Leave it empty to enable page scrolling while loading.
'on': The page cannot be scrolled until the loading process is complete.

Code Example:

$('#loftloader-wrapper').loftloader({
	disable_page_scrolling: 'on'
});

Please note: if your (or your site visitor’s) browser has a permanent scroll bar (on PC, or set to "always show scroll bars" on Mac), the scroll bar will always be visible even during the loading process.

Therefore, the page content will not move at the end of loading process – this happens if the scroll bar is hidden and then appears after the loading screen disappears, because the page content width will change at this moment.

2.11 Inner Elements Animation

You can choose the Entrance and Exit Animation for the Inner Elements in the loading screen.

What are Inner Elements?

The Inner Elements are: the loader, the progress indicator, and the message.

But please note: for best results, if you choose to display a progress bar and set its position to “Top” or “Bottom”, then the Entrance & Exit Animation will not be applied to this progress bar. Otherwise it will look weird.

inner_elements_entrance_animation

Type: String

Default: ''

Controls the entrance animation for all inner elements.

Possible values:

'': Default. The inner elements will appear in the loading screen without any transition animation effect.
'inner-enter-fade': The inner elements will appear with a fade in transition: opacity from 0 to 1.
'inner-enter-up': The inner elements will slide in from the bottom of the loading screen.

Code Example:

$('#loftloader-wrapper').loftloader({
	inner_elements_entrance_animation: 'inner-enter-fade'
});

inner_elements_exit_animation

Type: String

Default: 'inner-end-fade'

Controls the exit animation for all inner elements.

Possible values:

'inner-end-fade': Default. When the loading process is complete, the inner elements will disappear with a fade out transition: opacity from 1 to 0.
'inner-end-up': When the loading process is complete, the inner elements will slide up off the loading screen.

Code Example:

$('#loftloader-wrapper').loftloader({
	inner_elements_exit_animation: 'inner-end-fade'
});

2.12 Init Option

init

Type: Function

Default: none

Callback function before loftloader process start.

Code Example:

$('#loftloader-wrapper').loftloader({
	init: function(){
	// Insert JS code here to run before loftloader
	}
});

2.13 Finish Option

finish

Type: Function

Default: none

Callback function after loftloader process done.

Code Example:

$('#loftloader-wrapper').loftloader({
	finish: function(){
	// Insert JS code here to run after loftloader
	}
});

2.15 URL Parameter

This is a new feature added in version 1.1.0.

When a page has enabled LoftLoader on it, users can add "?pageloader=false" to the end of the page's URL so that the preloader can be hidden when sharing this page link with others (for example, email this page link to others).

For example:

A page URL is "https://www.mywebsite.com/homepage" and LoftLoader Pro is enabled on this page. So when visiting this link, the preloader will be displayed.
But when visiting "https:// www.mywebsite.com/homepage?pageloader=false", the preloader will not be displayed.