Page Loading

Default

This is the default page loading effect.

Show Code Example
SHOW EFFECT 
<body class="loading-overlay-showing" data-loading-overlay data-plugin-options="{'hideDelay': 500, 'effect': 'default'}">
	<div class="loading-overlay">
		<div class="bounce-loader">
			<div class="bounce1"></div>
			<div class="bounce2"></div>
			<div class="bounce3"></div>
		</div>
	</div>
	...
	......
	...
	.......

Percentage Progress 1

This is the percentage progress 1 page loading effect.

Show Code Example
SHOW EFFECT 
<body class="loading-overlay-showing" data-loading-overlay data-plugin-options="{'hideDelay': 500, 'effect': 'percentageProgress1'}">
	<div class="loading-overlay loading-overlay-percentage">
		<div class="page-loader-progress-wrapper">
			<span class="page-loader-progress">0</span>
			<span class="page-loader-progress-symbol">%</span>
		</div>
	</div>
	...
	......
	...
	.......

Percentage Progress 2

This is the percentage progress 2 page loading effect.

Show Code Example
SHOW EFFECT 
<body class="loading-overlay-showing" data-loading-overlay data-plugin-options="{'hideDelay': 500, 'effect': 'percentageProgress2'}">
	<div class="loading-overlay loading-overlay-percentage loading-overlay-percentage-effect-2">
		<div class="loading-overlay-background-layer"></div>
		<div class="page-loader-progress-wrapper">
			<span class="page-loader-progress">0</span>
			<span class="page-loader-progress-symbol">%</span>
		</div>
	</div>
	...
	......
	...
	.......

Cubes

This is the cubes page loading effect.

Show Code Example
SHOW EFFECT 
<body class="loading-overlay-showing" data-loading-overlay data-plugin-options="{'hideDelay': 500, 'effect': 'cubes'}">
	<div class="loading-overlay">
		<div class="bounce-loader">
			<div class="cssload-thecube">
				<div class="cssload-cube cssload-c1"></div>
				<div class="cssload-cube cssload-c2"></div>
				<div class="cssload-cube cssload-c4"></div>
				<div class="cssload-cube cssload-c3"></div>
			</div>
		</div>
	</div>
	...
	......
	...
	.......

Cube Progress

This is the cube progress page loading effect.

Show Code Example
SHOW EFFECT 
<body class="loading-overlay-showing" data-loading-overlay data-plugin-options="{'hideDelay': 500, 'effect': 'cubeProgress'}">
	<div class="loading-overlay">
		<div class="bounce-loader">
			<span class="cssload-cube-progress">
				<span class="cssload-cube-progress-inner"></span>
			</span>
		</div>
	</div>
	...
	......
	...
	.......

Float Rings

This is the float rings page loading effect.

Show Code Example
SHOW EFFECT 
<body class="loading-overlay-showing" data-loading-overlay data-plugin-options="{'hideDelay': 500, 'effect': 'floatRings'}">
	<div class="loading-overlay">
		<div class="bounce-loader">
			<div class="cssload-float-rings-loader">
				<div class="cssload-float-rings-inner cssload-one"></div>
				<div class="cssload-float-rings-inner cssload-two"></div>
				<div class="cssload-float-rings-inner cssload-three"></div>
			</div>
		</div>
	</div>
	...
	......
	...
	.......

Float Bars

This is the float bars page loading effect.

Show Code Example
SHOW EFFECT 
<body class="loading-overlay-showing" data-loading-overlay data-plugin-options="{'hideDelay': 500, 'effect': 'floatBars'}">
	<div class="loading-overlay">
		<div class="bounce-loader">
			<div class="cssload-float-bars-container">
				<ul class="cssload-float-bars-flex-container">
					<li><span class="cssload-float-bars-loading"></span></li>
				</div>
			</div>
		</div>
	</div>
	...
	......
	...
	.......

Speeding Wheel

This is the speeding wheel page loading effect.

Show Code Example
SHOW EFFECT 
<body class="loading-overlay-showing" data-loading-overlay data-plugin-options="{'hideDelay': 500, 'effect': 'speedingWheel'}">
	<div class="loading-overlay">
		<div class="bounce-loader">
			<div class="cssload-speeding-wheel-container">
				<div class="cssload-speeding-wheel"></div>
			</div>
		</div>
	</div>
	...
	......
	...
	.......

Zenith

This is the zenith page loading effect.

Show Code Example
SHOW EFFECT 
<body class="loading-overlay-showing" data-loading-overlay data-plugin-options="{'hideDelay': 500, 'effect': 'zenith'}">
	<div class="loading-overlay">
		<div class="bounce-loader">
			<div class="cssload-zenith-container">
				<div class="cssload-zenith"></div>
			</div>
		</div>
	</div>
	...
	......
	...
	.......

Spinning Square

This is the spinning square page loading effect.

Show Code Example
SHOW EFFECT 
<body class="loading-overlay-showing" data-loading-overlay data-plugin-options="{'hideDelay': 500, 'effect': 'spinningSquare'}">
	<div class="loading-overlay">
		<div class="bounce-loader">
			<div class="cssload-spinning-square-loading"></div>
		</div>
	</div>
	...
	......
	...
	.......

Pulse

This is the pulse page loading effect.

Show Code Example
SHOW EFFECT 
<body class="loading-overlay-showing" data-loading-overlay data-plugin-options="{'hideDelay': 500, 'effect': 'pulse'}">
	<div class="loading-overlay">
		<div class="bounce-loader">
			<div class="wrapper-pulse">
				<div class="cssload-pulse-loader"></div>
			</div>
		</div>
	</div>
	...
	......
	...
	.......