Page Loading
<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>
...
......
...
.......
<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>
...
......
...
.......
<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>
...
......
...
.......
<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>
...
......
...
.......
<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>
...
......
...
.......
<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>
...
......
...
.......
<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>
...
......
...
.......
<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>
...
......
...
.......
<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>
...
......
...
.......
<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>
...
......
...
.......
<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>
...
......
...
.......