# 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>
    	...
    	......
    	...
    	.......