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