Default

This is the default page loading effect.

Show Code Example
  <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
  <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
  <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
  <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
  <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
  <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
  <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
  <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
  <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
  <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
  <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>   ...   ......   ...   .......